jQuery 배너 취소 버튼 위로 마우스를 가져 가면 기능이 해제됩니다.

Question

나는 페이드 인하고자하는 3 개의 이미지가있는 배너와 jQuery를 사용하여 페이드 아웃합니다. 그러나 기치 아래

 
$j(document).ready(function() { 
     initBanner(); 
    startLoop = setInterval(initBanner,50000); 

    function initBanner(){ 
    $j("##image1").delay(10000).fadeOut(1500, function(){ 
    $j("##image2").fadeIn(1000, function(){ 
    $j("##image2").delay(10000).fadeOut(1500, function(){ 
     $j("##image3").fadeIn(1000, function(){ 
     $j("##image3").delay(10000).fadeOut(1500, function(){ 
     $j("##image1").fadeIn(1000); 
     //inMotion = false; 
     }); 
     }); 
    }); 
    }); 
    }); 
    } 

그들에게 관련 이미지가 3 개 링크입니다 :이 제품은 또한 다음과 같은 코드로 잘 작동합니다. 버튼에 마우스를 갖다 대면 버튼과 관련된 이미지가 페이드 인 및 페이드 아웃되는 이미지를 변경하려고합니다.

나는이 작업을 완료하기 전에 애니메이션이 완료 될 때까지 기다리는

clearInterval(startLoop)

을 시도했습니다. 내가 원했던 것은 애니메이션 immediatley를 멈추고 상대 이미지를 희미하게 할 수 있다는 것입니다.

아이디어가 있으십니까?

Answer 1

어쨌든 .stop() 메서드를 애니메이션 요소에 호출하는 데 필요한 현재 애니메이션을 즉시 중지하려면 약간 이상하게 보입니다. 두 개의 인수를 전달해야하며 모두 true으로 설정하면 (clearQueue & & jumpToEnd) 나타냅니다.

function stopBanner() { 
    clearInterval(startLoop); 
    $('##image1, ##image2, ##image3').stop(true, true); 
} 

다시 말하지만 코드를 다시 생각해보아야합니다. DOM refs를 캐싱하는 것은 여기에서 매우 중요한 일입니다.

참고 : .stop()