Jquery - Apply Style on CSS Animation End

Question

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');
});

Are you trying to apply this globally without having to assign it for individual animations? — Fosco
– Fosco, Commented Jun 5, 2011 at 0:54

Adam Coulombe · Accepted Answer · 2012-05-11 15:58:37Z

14

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');
});

answered May 11, 2012 at 15:58

Adam Coulombe

1561 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ouadie · Accepted Answer · 2014-01-16 14:36:04Z

3

You can use one()

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

answered Jan 16, 2014 at 14:36

Ouadie

13.2k4 gold badges54 silver badges63 bronze badges

Comments

no.good.at.coding · Accepted Answer · 2011-06-05 00:53:31Z

0

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 :)

edited Jun 5, 2011 at 0:53

no.good.at.coding

20.4k2 gold badges63 silver badges51 bronze badges

answered Jun 5, 2011 at 0:52

Arnaud

4105 silver badges10 bronze badges

4 Comments

Tim Over a year ago

Thanks, but the thing is that I'm already taking care of the animation with CSS3, I just want jQuery to know when that is done. It may seem unnecessary but I really need to use CSS to do the animation :)

addedlovely Over a year ago

Hi Tim, just use the jquery animate method instead of CSS animation, that way its cross browser compatible, and you can use the callback method above.

Alex Over a year ago

Yah except jQuery is slow as hell on mobile devices. I agree with the person who posted this, we need to know how to add a style to something once the webkit animation has finished...

Matt Briggs Over a year ago

this technique is orders of magnitude slower then using css

Chris Tifer · Accepted Answer · 2011-06-05 00:57:43Z

-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...

answered Jun 5, 2011 at 0:57

Chris Tifer

1

1 Comment

Alex Over a year ago

Stay on topic and answer his question. This is completely wrong because you aren't addressing the topic of how jquery can talk webkit animations events.

Collectives™ on Stack Overflow

Jquery - Apply Style on CSS Animation End

4 Answers 4

Comments

Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related