Advanced Search

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