CODEWITHSUNDEEP
jquery
mpen
mpen

Reputation: 283173

Stop animation *and* prevent complete action from running?

I'm fading a background in and out:

// in:
$bg.css({'pointerEvents':'auto'}).show()
    .stop(true).animate({ 'opacity': 0.90 }, animTime);

// out:
$bg.css({'pointerEvents':'none'}).stop(true)
    .animate({ 'opacity': 0 }, animTime,function () { $bg.hide(); });

The problem happens when I start fading it back in before it finishes fading out; the complete event will fire part way through the fade-in animation and hide the background.

I guess .stop(true) doesn't clear the complete event -- is there some way I can do that?

Upvotes: 1

Views: 75

Answers (2)

mpen
mpen

Reputation: 283173

Found a workaround:

$bg.data('fading',true).css({'pointerEvents':'auto'}).stop(true).show().transition({ 'opacity': 0.90 }, animTime, function () { $bg.data('fading', false); });

$bg.css({'pointerEvents':'none'}).stop(true).transition({ 'opacity': 0 }, animTime,function () {
    if(!$bg.data('fading')) {
        $bg.hide();
    }
});

Upvotes: 1

James Kleeh
James Kleeh

Reputation: 12228

Try .stop(true,true). That will stop the current event as well as remove queued events.

.stop( [clearQueue] [, jumpToEnd] )
clearQueueA Boolean indicating whether to remove queued animation as well. Defaults to false.
jumpToEndA Boolean indicating whether to complete the current animation immediately. Defaults to false.

Upvotes: 1

Related Questions