jQuery .animate issues, animations still stop (애니메이션 스태킹 ??)

Question

8 개의 미리보기 이미지가 있으며 첫 번째 행 위에 마우스를 올려 놓으면 다른 7 개는 50 %의 투명도로 움직입니다. ~ 100 %. 다른 엄지들도 마찬가지예요.

마우스 오버를 왼쪽에서 오른쪽으로 빠르게 시작할 때 문제가 발생한다는 것입니다. 왼쪽에서 오른쪽으로 빠르게 움직이면 (왼쪽에서 오른쪽으로 또는 갤러리의 왼쪽에서 오른쪽으로 생각하면) 애니메이션이 생기고 돈이 없습니다. 멈추지 마. 따라서 7 개의 미리보기 이미지가 있고 마우스가 REAL을 빠르게 지나치면 애니메이션이 7 배 재생됩니다. 내가 오른쪽으로 빠르게 롤오버하면 14 롤오버 등 .... (애니메이션 스택)

애니메이션이 멈추지 않는 점이 있습니다. 그리고 그 이유를 알았지 만 그것을 고칠 방법을 모르겠습니다. 나는 .stop()을 시도했지만 모든 것이 중단되었습니다. 나는 또한 애니메이션 시간을 줄이려고했으나 이미 500ms에서 그러 했으므로 더 짧고 일정한 온/오프 스위치가 있습니다. 나는 또한 .delay (여기의 수)를 시험해 보았다. 그러나 그래, 잘 didnt 일 LOL.

다음은 Js Fiddle입니다. 다만 경우 http://jsfiddle.net/somdow/y3vCP/

,

(jsFiddle 동일)이 예제의 HTML은 :

<div class="portThumbsL"> 
     <a href="images/sitePortThumbs/2882.png"><img src="images/sitePortThumbs/2882.png" alt="2882films"/></a> 
     <div class="thumbTxtSmall">2882FILMS</div> 
    </div> 
    <div class="portThumbsL"> 
     <a href="images/sitePortThumbs/2882.png"><img src="images/sitePortThumbs/1tech.png" alt="1-tech"/></a> 
     <div class="thumbTxtSmall">2882FILMS</div> 
    </div> 
    <div class="portThumbsL"> 
     <a href="images/sitePortThumbs/2882.png"><img src="images/sitePortThumbs/brazen.png" alt="brazen"/></a> 
     <div class="thumbTxtSmall">2882FILMS</div> 
    </div> 

는 CSS는 :

.portThumbsL{position:relative; width:245px; height:387px; float:left; background-color:#333; margin-right:14px;} 
.portThumbsR{position:relative;width:245px; height:387px; float:right; background-color:#333; margin-left:px;} 
.portThumbsL img, .portThumbsR img{display:block; margin:6px auto;} 

JQuery와는 다음과 같습니다

$('.portThumbsL , .portThumbsR').hover(function(){ 
    $(this).children('.portSecRollOver').css("display","block"); 
    $(this).find('.portSecInner').html("<h3 class='h34roll'>" + $(this).find('img').attr('alt') + "</h3>"); 
    //$('.portThumbsL, .portThumbsR').not(this).css("opacity", .5); 
    $('.portThumbsL, .portThumbsR').not(this).animate({opacity:.5},500); 
    }, 
    function(){ 
     $(this).children('.portSecRollOver').css("display","none"); 
    $('.portThumbsL, .portThumbsR').not(this).animate({opacity:1},500); 
    }); 

그래서 내 전반적인 질문은 미친 것없이 정상적으로 재생 그래서 나는 그것을 만들 수있는 방법이다.

Answer 1

시도 정지() 다음 clearQueue() ...

$ ('. portThumbsL, .portThumbsR').하지 (이) .stop(). clearQueue() .animate ({불투명도를 사용하여 : .5}, 500);

$ ('portThumbsL, .portThumbsR. ") 없다 (이) .stop() clearQueue() .animate (불투명도 {1}, 500).. 있는 경우, 새로운 애니메이션 주문이 대기됩니다 ​​:

당신이 할 때 http://jsfiddle.net/dZY7q/