CODEWITHSUNDEEP
jquery
Richard
Richard

Reputation: 1474

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

Upvotes: 0

Views: 62

Answers (2)

zaffer
zaffer

Reputation: 446

Just include overflow: hidden; in css for li

li {
  overflow:hidden;
}

More often than not, the jump is related to overflowing margins and paddings not being taken into account by jquery while animating the slideUp slideDown.

Updated jsfiddle : http://jsfiddle.net/MqVcb/3/

Upvotes: 0

karthikr
karthikr

Reputation: 99670

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

Upvotes: 1

Related Questions