0

我经常遇到这个问题，最后出现动画跳跃或口吃。有一个通用的解决方法吗？

这是动画的动作，结尾有口吃，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');
    }

});

谢谢

4

2 回答 2

1

的CSS

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

是什么搞砸了。

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

小提琴

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

这是新的小提琴

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

.left-sidebar-nav li:first-child {
    margin-top: 0;
}
于 2013-04-15T20:02:20.310 回答
0

只包括溢出：隐藏；在 css 中为 li

li {
  overflow:hidden;
}

通常情况下，跳跃与jquery在为slideUp slideDown设置动画时没有考虑到溢出的边距和填充有关。

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

于 2016-04-20T14:01:35.497 回答