CODEWITHSUNDEEP
javascriptjquery
Lycha
Lycha

Reputation: 10177

How to run code in jQuery after previous (unknown) animation/effect has finished?

I want to hide a DIV element after the previous effects/movements have completed. If I knew the sequence I could just add code to callback function that I give to .animate() (for example). However in this situation I don't have access to that state (it may or may not be going through an animation/effect). So the two animations/effects are triggered by two different events (button clicks for example).

So I would run fadeOut after the DIV element has finished the current animation/effect. Is this possible with jQuery?

Thanks.

EDIT: So the target is to decouple the current action (fadeOut() for example) code from the previous animation code.

EDIT2: Made the question more clear.

Upvotes: 0

Views: 1763

Answers (5)

SparK
SparK

Reputation: 5211

That's simple, just queue your animation

$("#myDiv").queue(function(){
    $(this).fadeOut();
});

It will be executed after the animation queue is complete. So you can add code after the animation queue and before your fadeOut and do whatever...

Upvotes: 0

gilly3
gilly3

Reputation: 91497

Just call .fadeOut() and it will automatically be added to the end of the fx queue:

http://jsfiddle.net/gilly3/f4vNH/

Upvotes: 2

Juan Ignacio
Juan Ignacio

Reputation: 3267

What about creating a custom event and binding to it with live()?

<script>
$("p").live("myCustomEvent", function(e, myName, myValue) {
  $('#div').hide();

});
$("button").click(function () {
  $("p").trigger("myCustomEvent");
});
</script>

Upvotes: 1

Justin Beckwith
Justin Beckwith

Reputation: 7866

I think you're looking for the complete function parameter in the animate call:

http://api.jquery.com/animate/

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

Upvotes: 0

jfriend00
jfriend00

Reputation: 707326

You will have to show us the previous animation code to get specific advice. In jQuery, animation effects can be chained together and jQuery will automatically queue them one after the other. Or, you can use the completion function of one operation to trigger the start of the next operation.

Examples:

$("#item").fadeIn(1000).delay(1000).fadeOut(500);
$("#item").animate({
    opacity: 0.75,
    left: '+=250',
 }, 5000).delay(1000).fadeOut(500);

The .animate() method also has a completion function which you can use to trigger any operation when the animation completes, but if the next operation is an animation itself, it's easier to just use the automatic chaining as above rather than the completion function:

$("#item").animate({
    opacity: 0.75,
    left: '+=250',
 }, 5000, function() {alert("Animation finished."});

Upvotes: 0

Related Questions