Utiliser jQuery delay () avec css ()

Pourquoi delay () fonctionne-t-il ici:

$('#tipper').mouseout(function() { $('#tip').delay(800).fadeOut(100); }); 

Mais cela ne retarde pas:

 $('#tipper').mouseout(function() { $('#tip').delay(800).css('display','none'); }); 

// EDIT – voici une solution de travail

 $('#tipper').mouseleave(function() { setTimeout( function(){ $('#tip').css('display','none'); },800); }); 

delay() fonctionne avec la queue d’ animation (fx). La modification d’une propriété css ne fonctionne pas via ce mécanisme et n’est donc pas affectée par la directive delay.

Il y a une solution de contournement – vous pouvez injecter la modification de propriété en tant qu’opération en queue, comme ceci:

 $('#tip') .delay(800) .queue(function (next) { $(this).css('display', 'none'); next(); }); 

En outre, vous devriez probablement utiliser .hide() au lieu de .css('display','none') .

Voici un exemple de travail: http://jsfiddle.net/redler/DgL3m/

Une petite extension jQuery peut vous aider. Vous pourriez l’appeler qcss :

 $.fn.extend({ qcss: function(css) { return $(this).queue(function(next) { $(this).css(css); next(); }); } }); 

Cela vous permet d’écrire:

 $('.an_element') .delay(750) .qcss({ backgroundColor: 'skyblue' }) .delay(750) .qcss({ backgroundColor: 'springgreen' }) .delay(750) .qcss({ backgroundColor: 'pink' }) .delay(750) .qcss({ backgroundColor: 'slategray' }) 

Cela peut être une manière assez élégante de définir une animation chaînée. Notez que sous cette forme très simple, qcss ne supporte qu’un seul argument d’object contenant des propriétés CSS. (Vous devrez faire un peu plus de travail pour prendre en charge par exemple .qcss('color', 'blue') .)

Voici un exemple sur jsfiddle.

Ajouté à la réponse / suggestion de Ken Redler :

En outre, vous devriez probablement utiliser .hide () au lieu de .css (‘display’, ‘none’).

Tu peux faire :

 $('#tip').delay(800).hide(0); 

Le 0 est important ici. Passer une valeur à .hide() l’appenda implicitement à la queue fx et par conséquent, cela fonctionnera comme prévu.

tester avec tous les navigateurs

 $(document).ready(function () { var id = $("div#1"); // div id=1 var color = "lightblue"; // color to highlight var delayms = "800"; // mseconds to stay color $(id).css("backgroundColor",color) .css("transition","all 1.5s ease") // you may also (-moz-*, -o-*, -ms-*) eg .css("backgroundColor",color).delay(delayms).queue(function() { $(id).css("backgroundColor",""); $(id).dequeue(); }); });