javascript - jQuery tooltip hover still running after mouse out -

i have simple tooltip:

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 {       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 home</em>     </li>      <li>       <a href="#">services</a>       <em>this shows our serivces</em>     </li>      <li>       <a href="#">about us</a>       <em>this shows things 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');     });  }); 

result:

https://jsfiddle.net/fsxm1ldt/

if hover mouse , fro several times on tooltip come in , out , not stop until completes number of times hovered in , out. how can prevent doing this?

this happening because animations being queued , executed in turn.

jquery has function called .stop() kind of situation. allows stop current animation , clear queue of others. prevents flickering effect you're seeing.

your code becomes:

$('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');     } ); 

here in action: https://jsfiddle.net/fsxm1ldt/2/