jQuery Animation Jumpiness

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鋰

li { 
    overflow:hidden; 
} 

更多的，往往不是跳躍有關，不被考慮的jQuery而動畫的效果基本show了slideDown溢出邊距和補。

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