Question

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

编辑：我正在使用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...');
    });

});

谢谢！

Answer 1

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

.info p{
    margin-bottom:0;
}

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

jQuery slideToggle：最后跳跃

1 个答案: