Posted By

alexandrepayet on 04/20/10


Tagged

javascript clear jquery function animation Queue execution fonction annuler abort stopper arreter infobulle


Versions (?)

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


 / Published in: jQuery
 

ici on souhaite qu'une info s'affiche aux survole d'un

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

    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  

    You need to login to post a comment.