애니메이트가 호버에서 끝나지 않은 상태에서 애니메이션이 끝나지 않은 상태에서 Jquery 큐가 멈추는 경우

Question

몇 개의 게시물을 체크 아웃하고 호버에 애니메이션 대기를 방지하기 위해 stop() 또는 filter (': not (: animated)')를 넣으려고했지만, 일하지 마라. 내 코드에서 해당 함수를 추가하려고 할 때마다 페이지가 더 이상로드되지 않습니다.

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

코드 :

당신은 그들이 페이지에서 고유해야합니다으로 (당신은 배수가있는 경우 jQuery를 만 첫 번째 "참조"것) 코드를 단순화하고 ID를 사용 중지해야

$(document).ready(function() { 

// when hover over the selected image change the opacity to 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"); 
     } 
     ); 
    }); 
} 
}); 

Answer 1

. 클래스를 대신 사용하십시오.

또한 기존 애니메이션이 연결될 시간을 결정해야합니다. 그렇지 않으면 함께 연결됩니다.

$(document).ready(function() { 

    // when hover over the selected image change the opacity to 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 : stop()는 해당 요소의 애니메이션 대기열 플러시이 완벽하지 않습니다 http://jsfiddle.net/zymje5Lq/1/

을하지만,`각 문제 :