jQuery .fadeOut(); .점점 뚜렷해지다(); 스팸 버그?

Question

이 가능한 경우 나도 몰라,하지만 난 fadeIn 아웃 그들에 신청 한 3 개 DIV의의가있다. 좋아요 :

$('.boxHolder1').hover(function() { 
     $('img.top1').fadeOut(400); 
    },function() { 
     $('img.top1').fadeIn(400); 
    }); 
    $('.boxHolder2').hover(function() { 
     $('img.top2').fadeOut(400); 
    },function() { 
     $('img.top2').fadeIn(400); 
    }); 
    $('.boxHolder3').hover(function() { 
     $('img.top3').fadeOut(400); 
    },function() { 
     $('img.top3').fadeIn(400); 
    }); 

내 질문.

이 코드를 더 효율적으로 만들 수 있습니다. 마우스를 사용하여 DIV를 스팸으로 보내면 기록 된 X 호버와 같이 지연 및 DIV가 무작위로 페이드 인되어 코드가 적절하게 적용됩니다.

Answer 1

당신은 이전에 실행 애니메이션을 중단 jQuery를에 stop 기능을 사용해야합니다

$('.boxHolder1').hover(
    function() { $('img.top1').stop().fadeOut(400); }, 
    function() { $('img.top1').stop().fadeIn(400); }); 
$('.boxHolder2').hover(
    function() { $('img.top2').stop().fadeOut(400); }, 
    function() { $('img.top2').stop().fadeIn(400); }); 
$('.boxHolder3').hover(
    function() { $('img.top3').stop().fadeOut(400); }, 
    function() { $('img.top3').stop().fadeIn(400); }); 

Answer 2

예, 이벤트 핸들러 호출이 대기하고 있습니다. 그건 분명히 버그가 아닙니다. 콜백에서

, 당신은 어떤 현재 실행중인 애니메이션을 중지 stop()를 사용할 수 있습니다. 너무 대기중인 사람을 취소 할 수있는 첫 번째 인수로 true을 통과해야하고, 두 번째 인수로 true은 대상 속성을 떠나는 반면 현재 실행중인 애니메이션 즉시을 중지 할 수 있습니다.

$('.boxHolder3').hover(function() { 
    $('img.top3').stop(true, true).fadeOut(400); 
}, 
function() { 
    $('img.top3').stop(true, true).fadeIn(400); 
}); 

당신이 변수의 교활한 사용하여 코드 중복을 줄일 수 있습니다하지만 당신은 더 이상 "효율적"이을받지 않습니다.

Answer 3

당신은 어떤 FADEIN/페이드 아웃하기 전에 애니메이션을 중지 할 수 있습니다.

Ex.

$('img.top1').stop(true,true).fadeOut(400); 

대기열을 지우고 즉시 애니메이션을 완성합니다. 필요에 맞게 stop() 함수의 두 매개 변수를 모두 변경하십시오.