jquery tooltip hover/rollover consistance

Question

Travailler sur un site comportant de grandes info-bulles avec du texte et une icône à l'intérieur lorsque vous passez un bouton. Le seul problème est que c'est parfois un peu incohérent, où une info-bulle apparaîtra lorsque vous n'avez pas roulé dessus, ou ils se coincent et ne disparaissent pas quand ils le devraient.

Mon Jquery:

$('#main_services ul li').hover(function() { 
    $('div.bubup', this).fadeIn('slow'); 
}, 
function() { 
    $('div.bubup', this).hide(); 
}); 

HTML Markup:

<div id="main_services"> 
    <ul> 
     <li><a class="top" href="http://google.com">Button 1</a> 
      <div class="bubup bi-1" style="display: none;"> 
       <div class="bubup-top"><div class="bubup-lip"><!-- --></div></div> 
       <div class="bubup-middle"> 
        <div class="bubup-content"><div class="bubup-icon"><!-- --></div><div class="margin-top4">Proin enim tellus, pharetra nec luctus id, malesuada at metus. In eu tincidunt justo. Sed et ante fringilla sapien pulvinar fringilla ac a nisl. Quisque vitae tortor sapien. Ut consequat libero posuere quam mollis eleifend. Phasellus iaculis odio in tortor egestas a pellentesque mi tincidunt. </div><div class="clear"><!-- --></div></div> 
       </div> 
       <div class="bubup-bottom"><!-- --></div> 
      </div> 
     </li> 
     <li><a class="top" href="http://google.com">Button 2</a> 
      <div class="bubup bi-2" style="display: none;"> 
       <div class="bubup-top"><div class="bubup-lip"><!-- --></div></div> 
       <div class="bubup-middle"> 
        <div class="bubup-content"><div class="bubup-icon"><!-- --></div><div class="margin-top4">Proin enim tellus, pharetra nec luctus id, malesuada at metus. In eu tincidunt justo. Sed et ante fringilla sapien pulvinar fringilla ac a nisl. Quisque vitae tortor sapien. Ut consequat libero posuere quam mollis eleifend. Phasellus iaculis odio in tortor egestas a pellentesque mi tincidunt. </div><div class="clear"><!-- --></div></div> 
       </div> 
       <div class="bubup-bottom"><!-- --></div> 
      </div> 
     </li> 
    </ul> 
</div> 

ne veux vraiment créer un lien vers le site de son sur, si nécessaire, je peux isoler le code et le mettre sur un lien de démonstration .

Donc la question est, y a-t-il des choses évidentes qui me manquent pour rendre les transitions agréables et fiables?

Answer 1

Vous voudrez peut-être essayer d'ajouter un .stop(true,true) juste avant le .fadeIn, cela pourrait résoudre votre problème. Si ce n'est pas le cas, je devrai voir un lien de démonstration.