Jquery stop queueing while animation is not finished on hover -

i checked out few posts , tried put either stop() or filter(':not(:animated)') avoid queueing animations on hover doesn't work. page won't load anymore everytime try add function in code.

<div id="competences">     <div id="logocomp">         <div>             <img id="devlogo" src="img/logodev.png" />             <p>developpement</p>             <p>- html/css -</br>             - javascript -</br>             - php -</br>             - java -</p>             </div>             <div>                 <img id="responsivelogo" src="img/responsive.png" />                 <p>responsive</p>                 <p>ce site est responsive et la plupart de mes projets le sont également.</p>             </div>             <div>                 <img id="logoprint" src="img/logoprint.png" />                 <p>graphisme</p>                 <p>photoshop, illustrator, indesign, blender, after effects, premiere</p>             </div>         </div>     </div> 

code:

$(document).ready(function() {    // when hover on selected image change opacity 1       var n = $("#competences").length;      for(i=0; i<n; i++){         $('#logocomp div').each(function(){         $(this).hover(           function(){             $(this).find('img').hide("slow");           $(this).find('p').delay(500).show("slow");         },          function(){             $(this).find('p').hide("hide");           $(this).find('img').delay(500).show("slow");        }        );       }); } });   

you need simplify code , stop using ids must unique on page (jquery "see" first 1 if have multiples). use classes instead.

you need decide when stop() existing animations or chain together. stop() flushes animation queue element:

$(document).ready(function () {      // when hover on selected image change opacity 1       $(".competences .logocomp div").hover(     function () {         $(this).find('img').stop().hide("slow");         $(this).find('p').stop().delay(500).show("slow");      },     function () {         $(this).find('p').stop()hide("hide");         $(this).find('img').stop().delay(500).show("slow");     }); }); 

jsfiddle: http://jsfiddle.net/zymje5lq/1/

this not perfect, avoids of problems :)