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

Edit2：您粘贴的链接是交叉渐变，这与您提出的不同。

jquery淡入淡出，淡出了nav li之间的中断

1 个答案: