当我将鼠标悬停在每个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>
尝试以下操作。编辑。现在它可以像你想要的那样工作了,但是我觉得它看起来比以前糟糕多了。
$('.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:你粘贴的链接是交叉褪色的,这与你要求的有些不同。