jQuery slideToggle：最后跳动

Question

我为“阅读更多.../阅读更少...”编写了一个.slideToggle的代码，问题在于在滑动结束时，动画会“跳动”，缺乏更好的描述。同样，在重新开始滑动时也会出现此问题。有什么建议吗？

这是我在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...');
    });

});

谢谢！

- alexwc_

Answer 1

通过移除滑动容器中最后一个子元素的margin，您可以消除跳跃现象。我认为这与jquery计算高度时包括margin有关，然后在应用display block时，margins会在其他元素上合并。

.info p{
    margin-bottom:0;
}

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

- mikes000

---

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

@Warface 我相信答案已经在回复中了：“我认为这与jQuery计算包括边距的高度有关，然后当应用显示块时，边距会对其他元素产生影响。” - alexwc_

我也认为这与jQuery计算边距有关。我有一个类似的情况，将我切换的div的margin-bottom更改为padding-bottom解决了跳动问题。 - Austin737