jQuery slideToggle：结尾跳动

Posted 2023-02-25

【中文标题】jQuery slideToggle：结尾跳动

【英文标题】：jQuery slideToggle: jumpy at the end

【发布时间】：2013-09-23 22:51:12

【问题描述】：

刚刚为 .slideToggle 写了一些内容，用于“阅读更多.../阅读更少...”，问题是在幻灯片末尾，动画“跳跃”，因为缺乏更好的描述。同样，当幻灯片再次启动时。有什么建议吗？

I have it in jsFiddle

编辑：我正在使用 Chrome

<div class="details">
<p>I am an excerpt.</p>
    <span class="show">Read More...</span>

        <div class="info">
        <p>the info to show in here......</p>
        </div>
        </div> <!-- details -->

<div class="details">
<p>I am an excerpt.</p>
    <span class="show">Read More...</span>

        <div class="info">
        <p>Some different info to show in here......</p>
        </div>
        </div> <!-- details -->

$(document).ready(function ()

    $(".info").hide();
        $(".show").click(function(event) 
        $(this).parent(".details").children("div.info").slideToggle(300);
        $(this).text($(this).text() == 'Read More...' ? 'Read Less...' : 'Read More...');
    );

);

谢谢！

【参考方案1】：

您可以通过删除滑动容器的最后一个子元素的边距来消除跳跃。我相信它与 jquery 计算高度（包括边距）有关，然后当应用显示块时，边距会在其他块上折叠。

.info p
    margin-bottom:0;

http://jsfiddle.net/QzStg/4/

【讨论】：

有人能解释一下这种行为吗？

@Warface 我相信答案就在答案中：“我相信这与 jquery 计算高度（包括边距）有关，然后当应用显示块时，边距会在其他部分上塌陷。”

我也相信这与jquery计算边距有关。我有一个类似的场景，并将我正在切换的 div 的 margin-bottom 更改为 padding-bottom 解决了跳跃问题。