Jquery - Apply Style on CSS Animation End

How would I use jQuery to determine when a CSS anima开发者_C百科tion 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');
}); 

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

You can use one()

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

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

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