jquery 페이드 인, 페이드 아웃 내비게이션 중단

Question

각 li 위에 마우스를 올리면 해당 이미지가 페이드 인 및 페이드 아웃됩니다. 그러나 하나의 네비게이션에서 다른 네비게이션으로 마우스를 가져 가면 첫 번째 이미지의 페이드 아웃이 중단되고 두 번째 이미지가 페이드 인됩니다. 하나의 네비게이션에서 다른 네비게이션으로 이동할 때 이미지에서 부드러운 크로스 페이드를 찾고 있습니다. 이 웹 사이트의 효과와 유사합니다 : http://www.bonnieroccelli.com/

어떤 도움을 주시면 감사하겠습니다!

HTML :

 <div class="banner-nav-wrap"> 
       <ul> 
        <li class="banner-nav-item" data-img="images/home-banner.png">List item 1</li> 
        <li class="banner-nav-item" data-img="images/1.jpg">List item 2</li> 
        <li class="banner-nav-item" data-img="images/6.jpg">List item 3</li> 
       </ul> 
     </div> 

JQuery와 :

<script type="text/javascript"> 
$('.banner-nav-item').hover(function() { 
     var img = $(this).attr('data-img'); 
     $('img#hover-img').css({"display" : "none"}); 
     $('img#hover-img').fadeIn('slow').attr('src', img); 
    },function() { 
     $('img#hover-img').fadeOut('slow'); 
    }); 

</script> 

Answer 1

는 다음을보십시오. 수정 됨. 이제는 원하는대로 작동하지만 이전 버전보다 훨씬 나 빠졌다고 생각합니다.

$('.banner-nav-item').hover(function() { 
    var img = $(this).attr('data-img'); 
    $('img#hover-img').fadeOut("slow", function(){ 
    $(this).fadeIn('slow').attr('src', img); 
    }); 
},function() { 
    $('img#hover-img').stop(true,true).fadeOut('slow'); 
}); 

편집 2 : 붙여 넣기 한 링크는 사용자가 물어 본 것과 다른 내용의 크로스 페이딩입니다.