Question

I am putting together a featured content slider element and while technically everything is working fine, I am however still experiencing animation build up when the nav buttons are clicked quickly. Here is my code:

this.LRSliderScrollVert = function(j) {
    var viewOutside = GetObject(this.sliderObjectId);
    if (parseInt(viewOutside.style.top) == 1 && j == 1){
        //do nothing
    } else if (parseInt(viewOutside.style.top) == this.sliderBottomLimit && j == -1) {

    } else {
        //viewOutside.style.top = parseInt(viewOutside.style.top) + j +'px';
        var total = parseInt(viewOutside.style.top) + j + 'px';
        $(viewOutside).stop().animate({
            top: total
        }, 700, 'swing');
    }
}

As you can see, I am already using stop() but it doesn’t seem to be giving me my desired results, which is one click calls the animation and no other calls to the animate function will be processed until the first animation has been completed.

I have tried stop(true,true) as well with no difference in results.

Any help would be greatly appreciated. Thank you.

Answer 1

.stop(true, true) stops the currently running animation, advances it to the end and removes it from the animation queue. That does not sound like what you are asking to do.

If you want subsequent animations to go AFTER the one in progress completes, then just remove the .stop() as the new animations will just get added to the queue after the current one.

If you want subsequent animations to not start at all if the object is currently animating, then you can check to see if the object is currently animating and, if so, avoid starting another animation.

To ignore any future animation while it is still animating from the last click, you can do this:

this.LRSliderScrollVert = function(j) {
    var viewOutside = GetObject(this.sliderObjectId);
    if (parseInt(viewOutside.style.top) == 1 && j == 1){
        //do nothing
    } else if (parseInt(viewOutside.style.top) == this.sliderBottomLimit && j == -1) {

    } else {
        var total = parseInt(viewOutside.style.top) + j + 'px';
        // remove any objects from the selector that are currently animating
        // if there are none left, then it will do nothing
        $(viewOutside).not(":animated").animate({
            top: total
        }, 700, 'swing');
    }
}

I removed the .stop() because that’s not what you want. That would stop the current animation, but you say you want it to continue. What you want to skip is any future animations while the current one is running.

I added .not(":animated") to remove any objects from the selector that are currently animating. If your one object is animating, this will leave an empty jQuery object and will then do nothing when you call the .animate() method. This just saves a little code over testing .is(":animated") and using an if statement on that result.