CODEWITHSUNDEEP
jquerycssanimation
Tim
Tim

Reputation: 67

Jquery - Apply Style on CSS Animation End

How would I use jQuery to determine when a CSS animation for an element has ended and then apply a new style to that element? Here is my non-functional code below.

$("#icon").jQuery.Event("webkitAnimationEnd", function(event){
    ('#icon').css('opacity', '1');
});

Upvotes: 5

Views: 9078

Answers (4)

Ouadie
Ouadie

Reputation: 13185

You can use one()

$("#icon").one('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e) {
    //Your css
    $('#icon').css('opacity', '1');
});

Upvotes: 3

Adam Coulombe
Adam Coulombe

Reputation: 156

I think actually what you are looking for is the .bind() method:

$("#icon").addClass('thisClassWillApplyMyCSSAnimation').bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e){
    //DO WHATEV
    $('#icon').css('opacity', '1');
});

Upvotes: 14

Chris Tifer
Chris Tifer

Reputation: 1

Most (if not all) animations define a callback for once the activity has completed.

For instance, assuming you want to slideDown() the #MyDiv object and once that's complete, change the opacity of the #icon:

$("#MyDiv").slideDown("[speed]", function()
{
  $("#icon").css("opacity", "1");
});

// [speed] = "slow", "normal", "fast" or a integer value defining milliseconds

I haven't tested that, but it should work...

Upvotes: -1

Arnaud
Arnaud

Reputation: 410

If I understand what you mean, you want to animate a css property and define a callback to execute when the animation ended. You should use the .animate() function.

ex:

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
  }, 5000, function() {
    // Animation complete.
  });
});

The following script will animate the opacity from its current value to 0.25. this will take 5000 milliseconds. The last function will be called after the animation completes.

Here the JQuery page about that: http://api.jquery.com/animate/

JQuery's great :)

Upvotes: 0

Related Questions