jQuery vol stationnaire infobulle toujours courir après la souris sur

Question

J'ai une info-bulle simple:

CSS:

html { 
     font: 100% calibri; 
    } 

    ul { 
     margin: 100px 0 0; 
     padding: 0; 
     list-style-type: none; 
    } 
    ul li { 
     padding: 0; 
     margin: 0 2px; 
     float: left; 
     position: relative; 
     text-align: center; 
     background-color: #ccc; 
    } 
    ul li a { 
     padding: 14px 10px; 
     display: block; 
     color: #000; 
     width: 144px; 
     text-decoration: none; 
     font-weight: bold; 
    } 
    ul li em { 
     background-color: #ccc; 
     width: 180px; 
     height: 45px; 
     position: absolute; 
     top: -85px; 
     left: -15px; 
     text-align: center; 
     padding: 20px 12px 10px; 
     font-style: normal; 
     z-index: 2; 
     display: none; 
    } 

HTML:

<ul> 
    <li> 
     <a href="#">Home</a> 
     <em>This takes you home</em> 
    </li> 

    <li> 
     <a href="#">Services</a> 
     <em>This shows you our serivces</em> 
    </li> 

    <li> 
     <a href="#">About Us</a> 
     <em>This shows things about us</em> 
    </li> 

    <li> 
     <a href="#">Contact Us</a> 
     <em>Your can message us.</em> 
    </li> 
    </ul> 

jQuery:

$(document).ready(function() { 

    $('ul a').hover(function(){ 
     $(this).next('em') 
     .animate({ 
     opacity: 'show', 
     top: '-75'}, 'slow'); 
    }, 
     function(){ 
     $(this).next('em') 
     .animate({ 
      opacity: 'hide', 
      top: '-85' 
     }, 'fast'); 
    }); 

}); 

Résultat:

https://jsfiddle.net/fsxm1Ldt/

Si je passe la souris ma souris et-vient à plusieurs reprises sur l'info-bulle ça va venir et sortir et ne cesserai pas jusqu'à ce qu'il complète le nombre de fois où je planait et sortir. Comment puis-je l'empêcher de faire cela?

Answer 1

Ceci est dû au fait que les animations sont mises en file d'attente puis exécutées à tour de rôle.

jQuery a une fonction appelée .stop() qui est pour ce genre de situation. Il vous permet d'arrêter l'animation en cours et d'effacer la file d'attente de tous les autres. Cela empêche l'effet de scintillement que vous voyez.

Votre code devient:

$('ul a').hover(
    function() { 
     $(this).next('em') 
      .stop(true, true).animate({ 
       opacity: 'show', 
       top: '-75' 
      }, 'slow'); 
     }, 
    function() { 
     $(this).next('em') 
      .stop(true, true).animate({ 
       opacity: 'hide', 
       top: '-85' 
      }, 'fast'); 
    } 
); 

Ici, il est en action: https://jsfiddle.net/fsxm1Ldt/2/

Answer 2

Vous n'avez pas besoin Javascript ou jQuery du tout pour cela. Utilisez transtition et :hover css à la place:

ul li em { 
    /* remove display: none; */ 
    opacity: 0; 
    transition-duration: 0.4s; 
} 
ul li a:hover + em { 
    opacity: 1; 
    top: -75px; 
} 

https://jsfiddle.net/fsxm1Ldt/3/