Jquery: aplicar estilo en la animación CSS End

¿Cómo usaré jQuery para determinar cuándo ha finalizado una animación CSS para un elemento y luego aplicarle un nuevo estilo a ese elemento? Aquí está mi código no funcional a continuación.Jquery: aplicar estilo en la animación CSS End

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

Fuente

2011-06-05 Tim

¿Está tratando de aplicar esto globalmente sin tener que asignarlo para animaciones individuales? – Fosco

Realmente necesito asignarlo a animaciones individuales:/ – Tim

creo que en realidad lo que busca es el método .bind():

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

Fuente

2012-05-11 15:58:37

Si entiendo lo que quiere decir, que desea animar una propiedad CSS y definir una devolución de llamada que se ejecutará cuando terminó la animación. Debería usar la función .animate().

ejemplo:

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

El siguiente script animar la opacidad de su valor actual a 0,25. esto llevará 5000 milisegundos. Se llamará a la última función una vez que se complete la animación.

Aquí la página jQuery sobre eso:

de jQuery grande :)

Fuente

2011-06-05 00:52:31 Arnaud

Gracias, pero la cosa es que ya me estoy ocupando de la animación con CSS3, solo quiero que jQuery sepa cuándo se hace eso. Puede parecer innecesario, pero realmente necesito usar CSS para hacer la animación :) – Tim

Hola Tim, solo usa el método jquery animado en lugar de la animación CSS, de esa manera es compatible con el navegador cruzado, y puedes usar el método de devolución de llamada anterior. – addedlovely

Yah, excepto jQuery es lento como el infierno en dispositivos móviles. Estoy de acuerdo con la persona que publicó esto, necesitamos saber cómo agregar un estilo a algo una vez que la animación del webkit haya terminado ... – Alex

-1

La mayoría (si no todos) animaciones definen una devolución de llamada para una vez que la actividad se ha completado.

Por ejemplo, asumiendo que usted quiere slideDown() del objeto #MyDiv y una vez que esté completo, cambiar la opacidad de la #icon:

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

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

no he probado eso, sino que debe trabajar. ..

Fuente

2011-06-05 00:57:43

Quédese con el tema y responda su pregunta. Esto es completamente incorrecto porque no está abordando el tema de cómo jquery puede hablar de eventos de animaciones de webkit. – Alex

puede utilizar one()

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

Fuente

2014-01-16 14:36:04 Ouadie

Jquery: aplicar estilo en la animación CSS End

Respuesta

Cuestiones relacionadas