jQuery - not able to stop animation and fade out/in functions

Question

I have read a lot of topics and jQuery documentation, but still I am not able to solve this issue.

What I have is div with opacity 0 and some background color. On user "click" event of some button, I call the "StartAnimationFuncton" function which make the div with opacity 1 and add loading images.

Then when information is received from the server, I call the "StopAnimationFuncton" function which should remove the loading div, and then to make the background div with opacity 0 again.

Note: I set delay(1000), to the loading before removing it, because if the request is done too fast, the loading is show for a milliseconds and looks ugly.

//StartAnimationFuncton
$("#BackGroundDiv").stop('fx',true,false).animate({opacity:1.0},1000,function(){
    $('#ShopperPortalLoadingDivContentTable').remove();
    $('<div id="Loading" style="width:100%;height:100%"></div>').hide().appendTo('#BackGroundDiv').stop('fx',true,false).fadeIn(500,function(){
        ...
        //Waiting data from the server - when the date is call the StopAnimationFunction
        ...
    });
});

//StopAnimationFuncton
$('#Loading').stop(true,false).delay(1000).fadeOut(500,function(){
    $(this).remove();
    $("#BackGroundDiv").stop(true,false).animate({opacity:0.0},1000,function(){
        ShopperPortal.Content.Functions.Render.InitializeRenderModeContainerAndLoadingEffects.Parameters.IsStopLoadingEffectActive=false;
    });
});

My problem is that when the user 'click' many time on the button, the current animations are not stopped. I have try all variants - using stop(),stop('fx',true,false), stop(true,true), stop(true,false) for each combination of elements, but nothing help.

Which is the correct way to stop the current animations and complete functions? Also. if my logic is incorrect, I am opened for new ideas?

EDIT 1: I am using jQuery version 1.8.2

EDID 2: I have read that the delay(1000) can cause problems because it can not be removed/canceled.

Jquery .delay().fadeOut cancel/clear queue.. Is it possible? How?

http://forum.jquery.com/topic/stop-does-not-clear-delay

That's why I have replaced it with animation({opacity:1.0},1000) but nothing changed.

Sorry, I am not able - with the example I wanted to show my logic and I hope that I have made some syntax error or used the functions in incorrect way, so someone could correct me. — gotqn

RASG RASG · Accepted Answer · 2012-10-12T15:24:45

If more than one animation method is called on the same element, the later animations are placed in the effects queue for the element.

These animations will not begin until the first one completes.
When .stop() is called, the next animation in the queue begins immediately.

If the clearQueue parameter is provided with a value of true, then the rest of the animations in the queue are removed and never run.

jQuery - not able to stop animation and fade out/in functions

1 Answers