Richard Richard - 7 months ago 27
Javascript Question

jQuery Animation Jumpiness

I run into this problem often, having an animation jump or stutter at the end. Is there a common fix for this?

Here's the animation in action with the stutter at the end, http://jsfiddle.net/MqVcb/.

Click on the "slide down item" link in the menu to see the stutter.

Here's the jQuery code,

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');
}

});


Thank you

Answer

The css

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

is what is messing things up.

Remove it, and you will not see the effect.

fiddle

To maintain the margin, just use margin-top: 10px

Here is the new fiddle

If you do not want the margin on the first element,

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