CODEWITHSUNDEEP
jqueryjquery-animate
Juank
Juank

Reputation: 6196

What could cause a jQuery animation run in less steps?

I have a js function scrollToTop() which calls jQuery animate to animate the scrollTop property like this

function scrollToTop(){
    $('html, body').animate({ scrollTop: 0 }, {
        'duration':500,
        'step':function(){
            console.log('step',jQuery.fx.interval);
        }
    });
}

I have 2 links, each with a different .click handler inside of which the scrollToTop function is called. When I call it from one link the animation is smooth and happens in 13 to 15 steps, when called from the other link handler the animation is choppy and happens in 2 to 3 steps. The jQuery.fx.interval is 13 in both cases.

What else could cause jQuery to execute an animation in less steps?

Edit:

As requested, the handlers are:

$('.panel-item').click(function(e){    
    var item = $(this);

    if ($(item).hasClass('wa_reset'))
        $items.removeClass('active'); // this is declared earlier in the code $items = $('.panel');

    scrollToTop();
});

$('.scroll-top').click(function(e){
    scrollToTop();
});

No other handlers are attached to the links.

It's also good to note that the same is happening with other animations on the site and on all browsers. For example a image slider sometimes slides to the next image in 20 steps, but on others in 2-3 steps. The most consistent scenario to replicate the issue has been the one stated before with the scrollToTop function.

Upvotes: 3

Views: 284

Answers (1)

Juank
Juank

Reputation: 6196

Ok, to answer my own question. It turns out that the on click event was firing on an element that was nested deeply inside the markup of the page. Therefore the event caused a delay on jquery's response by bubbling up. Using e.stopPropagation(); inside the click handler avoided bubbling and allowed the animation to execute at the correct speed. However, why the interval changes inside jQuery still remains a mystery to me.

Upvotes: 1

Related Questions