En JQuery, ¿es posible obtener la función de callback después de establecer una nueva regla css?

Tengo $('.element').css("color","yellow") y necesito que el próximo evento sea solo después de este, algo se ve como $('.element').css("color","yellow",function(){ alert(1); }) Necesito esto porque:

 $('.element').css("color","yellow"); alert(1); 

los eventos suceden casi al mismo tiempo, y este momento llama al error en el efecto de animación (la alerta (1) está aquí, por ejemplo, en el módulo real es animación)

Las rellamadas solo son necesarias para funciones asíncronas. La función css siempre se completará antes de que la ejecución del código continúe, por lo que no se requiere una callback. En el código:

 $('.element').css('color', 'yellow'); alert(1); 

El color se cambiará antes de que se active la alerta. Puede confirmar esto ejecutando:

 $('.element').css('color', 'yellow'); alert($('.element').css('color')); 

En otras palabras, si desea utilizar una callback, simplemente ejecútela después de la función css:

 $('.element').css('color', 'yellow'); cb(); 

puedes usar la promesa

 $('.element').css("color","yellow").promise().done(function(){ alert( 'color is yellow!' ); }); 

http://codepen.io/onikiienko/pen/wBJyLP

Puede usar setTimeout para boost el tiempo de suspensión entre la alerta y el CSS de esta manera:

 function afterCss() { alert(1); } $('.element').css("color","yellow"); setTimeout(afterCss, 1000); 

Esto hará que la alerta aparezca 1 segundo después de que se hayan cometido los cambios de css.

Esta respuesta está desactualizada, por lo que es posible que desee utilizar las promesas de ES6 como la respuesta anterior.


 $('.element').css("color", "yellow").promise().done(function(){ // The context here is done() and not $('.element'), // be careful when using the "this" variable alert(1); }); 

No hay callback para la función jquery css. Sin embargo, podemos dar la vuelta, no es una buena práctica, pero funciona.

Si lo llamas justo después de hacer el cambio

 $('.element').css('color','yellow'); alert('DONE'); 

Si desea que esta función solo se haya llamado justo después del cambio, realice un ciclo de intervalo.

 $('.element').css('color','yellow'); var detectChange = setInterval(function(){ var myColor = $('.element').css('color'); if (myColor == 'yellow') { alert('DONE'); clearInterval(detectChange); //Stop the loop } },10); 

Para evitar un ciclo infinito, establezca un límite

 var current = 0; $('.element').css('color','yellow'); current++; var detectChange = setInterval(function(){ var myColor = $('.element').css('color'); if (myColor == 'yellow' || current >= 100) { alert('DONE'); clearInterval(detectChange); //Stop the loop } },10); 

O usando settimeout como se menciona arriba /

use la promesa jquery,

 $('.element').css("color","yellow").promise().done(function(){alert(1)});