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之间淡出淡出

回答

相关问题