Return to Snippet

Revision: 26187
at April 20, 2010 02:08 by alexandrepayet


Updated Code
<ul>
    <li>survole moi pour voir mon level <img src="img/5.jpg" alt="5/5"/></li> <!-- l'img est cachee en css -->
</ul>

<script type="text/javascript">
	//<![CDATA[
		
		/*level show/hide handler
                -------------------------*/

                //il survole on met en queue une fonction qui va au bout d'un delai de 650ms afficher en fade in <img>
		$(".level").bind("mouseenter",
			function(){
				$(this).attr("id", "liCur");
				$("#liCur img").queue(function(){
					$(this).delay(650).fadeIn("fast"); //c'est ici u'on defini notre delai avec delay()
					$(this).dequeue();
				});
			}
		);
			
		$(".level").bind("mouseleave", 
			function(){
				$("#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
				$("#liCur img").fadeOut("fast");
				$("#liCur").removeAttr("id");
			}
		);

	//]]>
	</script>

Revision: 26186
at April 20, 2010 02:04 by alexandrepayet


Initial Code
<ul>
    <li>survole moi pour voir mon level <img src="img/5.jpg" alt="5/5"/></li> <!-- l'img est masqué en css -->
</ul>

<script type="text/javascript">
	//<![CDATA[
		
		/*level show/hide handler
                -------------------------*/

                //il survole on met en queue une fonction qui va au bout d'un delai de 650ms afficher en fade in l'img
		$(".level").bind("mouseenter",
			function(){
				$(this).attr("id", "liCur");
				$("#liCur img").queue(function(){
					$(this).delay(650).fadeIn("fast");
					$(this).dequeue();
				});
			}
		);
			
		$(".level").bind("mouseleave", 
			function(){
				$("#liCur img").clearQueue(); // cette ligne fera en sorte que le fade in ne se fasse pas si le mouseleave est survenu avant la fin du delai de 650ms
				$("#liCur img").fadeOut("fast");
				$("#liCur").removeAttr("id");
			}
		);

	//]]>
	</script>

Initial URL


Initial Description
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.

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

Initial Tags
javascript, jquery, function, animation

Initial Language
jQuery