jQuery动画跳动

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

只需在li的css中包含overflow: hidden；

li {
  overflow:hidden;
}

通常，跳转与jquery在slideUp slideDown动画中没有考虑到的溢出页边距和填充有关。

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