jQuery 애니메이션 지연

Question

3 개의 유사한 탭 항목에 대해 약간의 기능을 다룰 예정입니다. 기본적으로, 하나 위에 마우스를 올리면 두 형제의 불투명도가 50 %가되기를 원합니다.

$('.footer-tabs').hover(
    function() { 
     $(this).siblings().animate({ opacity: .5 },500); 
    }, 
    function() { 
     $(this).siblings().animate({ opacity: 1 },500); 
    } 
); 

하나 모든 것이 잘 작동에 당신이 가져

:하지만, 나는 아주 기본적인 jQuery를 호버 이벤트, 여기에 페이지 코드의 ...

<div id="footer"> 
    <a href="#" class="footer-tabs" id="footer-seek">Seek</a> 
    <a href="#" class="footer-tabs" id="footer-experience">Experience</a> 
    <a href="#" class="footer-tabs" id="footer-gain">Gain</a> 
</div> 

... 그리고 해당 JS를 설정 당신은 형제가 동시에 어둡게하지 않는 한쪽에서 다른쪽으로 움직입니다. 나는 참조 용으로 빠른 screencast를했다. 제대로 작동하게하는 간단한 방법이있을 것이라고 확신하지만, 나는 그것을 잃어 버리게됩니다. 미리 감사드립니다.

스크린 캐스트 : http://dl.dropbox.com/u/1762184/example.mp4

Answer 1

. 이것은 stop() 기능을위한 것입니다.

$('.footer-tabs').hover(
    function() { 
     $(this).siblings().stop().animate({ opacity: .5 },500); 
    }, 
    function() { 
     $(this).siblings().stop().animate({ opacity: 1 },500); 
    } 
); 

Answer 2

이 시도 : 당신은 형제 자매에 대한 프로세스 애니메이션에 어떤을 취소 할

$('.footer-tabs').hover(
    function() { 
     $(this).siblings().animate({ opacity: .5 },"fast"); 
    }, 
    function() { 
     $(this).siblings().animate({ opacity: 1 },"fast"); 
    } 
);