Jquery retard change css

J'essaie de réinitialiser certains css mais avec un délai après le clic. Pour une raison quelconque, le délai semble être ignoré. Des idées?

$("#closeMe").live("click", function() { $("#selectContainer").fadeOut( function() { scrollerPos = 1 $(".scroller").delay(3000).css({"margin-left":"0px"}); $("#selectContainer img").delay(3000).css({"background-color":"#FFF"}); $("#selectContainer img:eq(0)").delay(3000).css({"background-color":"#000"}); }); }); 

Je ne crois pas que css participe aux effets, donc il ne sera pas au courant de la file d'attente. À partir des documents de delay :

Seuls les événements ultérieurs dans une file sont retardés; Par exemple, cela ne retardera pas les formes sans argument de .show() ou .hide() qui n'utilisent pas la file d'attente des effets.

Assez sûr que css est sur cette liste aussi.

Pas de problème cependant; tu peux le faire:

 $("#closeMe").live("click", function() { $("#selectContainer").fadeOut( function() { scrollerPos = 1 setTimeout(function() { $(".scroller").css({"margin-left":"0px"}); $("#selectContainer img")..css({"background-color":"#FFF"}); $("#selectContainer img:eq(0)").css({"background-color":"#000"}); }, 3000); }); }); 

Utilisez setTimeout() au lieu de .delay()

 setTimeout(resetCSS, 3000); function resetCSS() { $(".scroller").css({"margin-left":"0px"}); $("#selectContainer img").css({"background-color":"#FFF"}); $("#selectContainer img:eq(0)").css({"background-color":"#000"}); } 

essayer

 setTimeout(function(){ $(".scroller").css({"margin-left":"0px"}); $("#selectContainer img").css({"background-color":"#FFF"}); $("#selectContainer img:eq(0)").css({"background-color":"#000"}); },3000); 

Citation de .delay()

Seuls les événements ultérieurs dans une file sont retardés;

La méthode .css() n'utilise pas la file d'attente.

Vous devez utiliser un délai d'attente

 $("#closeMe").live("click", function() { $("#selectContainer").fadeOut( function() { scrollerPos = 1 setTimeout(function(){ $(".scroller").delay(3000).css({"margin-left":"0px"}); $("#selectContainer img").delay(3000).css({"background-color":"#FFF"}); $("#selectContainer img:eq(0)").delay(3000).css({"background-color":"#000"}); }); }); }); 

css n'est pas une fonction animée. Il ne peut pas être delay .

Vous pouvez utiliser animate pour cela:

 $(".scroller").delay(3000).animate({"marginLeft":0}, 0); 

Mais cela ne fonctionne qu'avec des propriétés numériques, pas background-color . Pour cela, vous pouvez utiliser jQuery UI animate :

Le noyau d'effets jQuery UI étend la fonction animée pour pouvoir également animer les couleurs. Il est fortement utilisé par la fonction de transition de classe et il est capable de colorer animer les propriétés suivantes:

Couleur de fond
BorderBottomColor
BorderLeftColor
BorderRightColor
BorderTopColor
Couleur
OutlineColor