Advanced Search

JS, JQUERY : mettre une fonction en queue et annuler l'exécution d'une fonction en queue avec queue(), dequeue(), clearQueue()

/ Published in: jQuery
Save to your folder(s)
ici on souhaite qu'une info s'affiche aux survole d'un <li> mais seulement une fois qu'un délai de 650 millisecondes est passé. Cependant si l'user ne survole plus la zone avant la fin du délai, il faut interrompre l'affichage de l'info. Voilà une manière simple de procéder.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <ul>
  2.     <li>survole moi pour voir mon level <img src="img/5.jpg" alt="5/5"/></li> <!-- l'img est cachee en css -->
  3. </ul>
  4.  
  5. <script type="text/javascript">
  6. 	//<![CDATA[
  7.  
  8. 		/*level show/hide handler
  9.                 -------------------------*/
  10.  
  11.                 //il survole on met en queue une fonction qui va au bout d'un delai de 650ms afficher en fade in <img>
  12. 		$(".level").bind("mouseenter",
  13. 			function(){
  14. 				$(this).attr("id", "liCur");
  15. 				$("#liCur img").queue(function(){
  16. 					$(this).delay(650).fadeIn("fast"); //c'est ici u'on defini notre delai avec delay()
  17. 					$(this).dequeue();
  18. 				});
  19. 			}
  20. 		);
  21.  
  22. 		$(".level").bind("mouseleave", 
  23. 			function(){
  24. 				$("#liCur img").clearQueue(); //cette ligne va faire annuler le fade in de l'image si le mouseleave est survenu avant la fin du delai de 650ms
  25. 				$("#liCur img").fadeOut("fast");
  26. 				$("#liCur").removeAttr("id");
  27. 			}
  28. 		);
  29.  
  30. 	//]]>
  31. 	</script>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.