JS，JQUERY:mettre une fonction en queue et annuer l'；exécution d'；une fonction en queue(示例代码

Posted 2021-02-25

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.

<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>