J'ai $('.element').css("color","yellow")
et j'ai besoin que le prochain événement soit seulement après celui-ci, quelque chose qui ressemble à $('.element').css("color","yellow",function(){ alert(1); })
J'en ai besoin parce que:
$('.element').css("color","yellow");
alert(1);
les événements se produisent presque tous à la fois, et ce moment appelle le bogue dans l'effet d'animation (alert (1) est ici, par exemple, dans le module réel, c'est l'animation)
Les rappels ne sont nécessaires que pour les fonctions asynchrones. La fonction css sera toujours terminée avant la poursuite de l'exécution du code, donc aucun rappel n'est requis. Dans le code:
$('.element').css('color', 'yellow');
alert(1);
La couleur sera modifiée avant le déclenchement de l'alerte. Vous pouvez le confirmer en lançant:
$('.element').css('color', 'yellow');
alert($('.element').css('color'));
En d'autres termes, si vous voulez utiliser un rappel, exécutez-le après la fonction css:
$('.element').css('color', 'yellow');
cb();
vous pouvez utiliser la promesse
$('.element').css("color","yellow").promise().done(function(){
alert( 'color is yellow!' );
});
Vous pouvez utiliser setTimeout pour augmenter le temps de repos entre l'alerte et le css comme suit:
function afterCss() {
alert(1);
}
$('.element').css("color","yellow");
setTimeout(afterCss, 1000);
Cela fera apparaître l'alerte une seconde après la validation des modifications css.
Cette réponse est obsolète, vous pouvez donc utiliser les promesses de ES6 comme ci-dessus.
$('.element').css("color", "yellow").promise().done(function(){
// The context here is done() and not $('.element'),
// be careful when using the "this" variable
alert(1);
});
Il n'y a pas de rappel pour la fonction jquery css. Cependant, nous pouvons faire le tour, ce n’est pas une bonne pratique, mais cela fonctionne.
Si vous appelez juste après avoir effectué le changement
$('.element').css('color','yellow');
alert('DONE');
Si vous voulez que cette fonction ait été appelée juste après le changement, faites une boucle d'intervalle.
$('.element').css('color','yellow');
var detectChange = setInterval(function(){
var myColor = $('.element').css('color');
if (myColor == 'yellow') {
alert('DONE');
clearInterval(detectChange); //Stop the loop
}
},10);
Pour éviter une boucle infinie, définissez une limite
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);
Ou en utilisant settimeout comme mentionné ci-dessus /
Oui c'est possible. Vous devez utiliser la fonction jQuery animate
avec une durée de 0
:
$('#my-selector').animate({
'my-css-property-name': 'my-css-property-value'
}, {
duration: 0,
done: function(animation, jumpedToEnd) {
// Your callback here
}
})
Pour en savoir plus sur les paramètres de la fonction done
, consultez la documentation .
utiliser jquery promise,
$('.element').css("color","yellow").promise().done(function(){alert(1)});