Question

我经常遇到这个问题，最后有动画跳跃或口吃。对此有一个共同的解决方法吗？

这是最后一个口吃的动画，http://jsfiddle.net/MqVcb/。

单击菜单中的“向下滑动项目”链接以查看口吃。

这是jQuery代码，

var menu_ul = $('.left-sidebar-nav > li > ul'),
    menu_a  = $('.left-sidebar-nav > li > a');

menu_ul.hide();

menu_a.click(function(e) {
    e.preventDefault();

    if(!$(this).hasClass('active')) {
        menu_a.removeClass('active');
        menu_ul.filter(':visible').slideUp('normal');
        $(this).addClass('active').next().stop(true,true).slideDown('normal');
    } else {
        $(this).removeClass('active');
        $(this).next().stop(true,true).slideUp('normal');
    }

});

谢谢

Answer 1

css

.left-sidebar-nav li {
    margin-bottom: 8px;
}

正在搞乱事情。

删除它，你将看不到效果。

fiddle

要维护margin，请使用margin-top: 10px

这是新的fiddle

如果您不想要第一个元素的边距，

.left-sidebar-nav li:first-child {
    margin-top: 0;
}

Answer 2

只包括溢出：隐藏;在css for li

li {
  overflow:hidden;
}

通常，在设置slideUp slideDown动画时，跳转与溢出的边距和填充没有被jquery考虑在内。

更新了jsfiddle：http://jsfiddle.net/MqVcb/3/

jQuery动画Jumpiness

2 个答案: