jquery淡入，導航li之間淡出淡出

當我將鼠標懸停在每個li上時，相應的圖像淡入淡出。但是，當我從一個導航li懸停到另一個導航li時，第一個圖像的淡出被中斷，第二個圖像淡入。當我從一個導航li懸停到另一個導航li時，我正在尋找圖像的平滑交叉淡入淡出。類似於本網站的效果：http://www.bonnieroccelli.com/jquery淡入，導航li之間淡出淡出

任何幫助將大規模讚賞！

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>

來源

2014-03-25 user3163317

可能的重複[如何構建簡單的jQuery圖像滑塊與滑動或不透明效果？]（http://stackoverflow.com/questions/12608356/how-to-build-simple-jquery-image-slider-with-滑動或不透明效果） – avall

嘗試以下。已編輯。現在它像你想要的那樣工作，但我認爲它比以前更糟糕。

$('.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'); 
});

EDIT2：您粘貼的鏈接是交叉淡入淡出這是不同的東西比你問。

來源

2014-03-25 18:55:52 avall

感謝您的迴應。現在它開始懸停的動畫，但如果我再次懸停，它會暫停動畫。有什麼建議麼？我正在尋找的效果是這樣的：http：//www.bonnieroccelli.com/ – user3163317

道歉，在鏈接中的效果實際上是我後。你對此有何建議？ – user3163317

是的。以智能的方式使用2張圖片:)。 – avall

jquery淡入，導航li之間淡出淡出

回答

相關問題