当鼠标悬停在每个菜单项上时,我希望我的背景图像发生变化。我的代码有效但是,当图片fadeout
和fadein
时,其间会出现白色闪光。要删除它,我希望图像交叉淡入淡出,而不是仅仅淡出和淡出。
我怎么能做到这一点?
$(document).ready(function() {
$(".home-menu-list li a").mouseenter(function() {
var bannerClass = '#home-banner-' + $(this).attr('id');
$('.active-banner').not(bannerClass).stop().fadeOut().removeClass('active-banner');
$(bannerClass).stop().fadeIn().addClass('active-banner');
});
});
.main-banner-wrapper img {
height: 50px;
width: 100%;
object-fit: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid ">
<div id="home-banner-1" class="active-banner">
<div class="main-banner-wrapper">
<img src="http://farm6.staticflickr.com/5145/5576437826_940f2db110.jpg" alt="Image 1" class="upload">
</div>
<div class="col-md-4 col-sm-6 visible-lg visible-md visible-sm front-text">
<p>Thethe world.</p>
</div>
</div>
<div id="home-banner-2" style="display:none">
<div class="main-banner-wrapper">
<img src="http://farm4.staticflickr.com/3611/3463265789_586ce40aef.jpg" class="upload">
</div>
<div class="col-md-4 col-sm-6 visible-lg visible-md visible-sm front-text">
<p>Thethe world.</p>
</div>
</div>
<div id="home-banner-3" style="display:none">
<div class="main-banner-wrapper">
<img src="http://farm6.staticflickr.com/5263/5601183065_f88a48d599.jpg" class="upload">
</div>
<div class="col-md-4 col-sm-6 visible-lg visible-md visible-sm front-text">
<p>The around the world.</p>
</div>
</div>
</div>
<!--content-->
<div class="container-fluid">
<div class="main-logo-panel">
<div class="box">
<div class="col-md-12 col-sm-12 ">
<div class="col-md-3 col-sm-3 col-xs-4 main-logo"></div>
<div class="col-md-9 col-sm-9 col-xs-8 main-menu">
<ul class="list-inline home-menu-list">
<li><a href="#" id="1">Rigging</a>
</li>
<li><a href="#" id="2">Hatches </a>
</li>
<li><a href="#" id="3">Stoppers</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
查看JsFiddle
答案 0 :(得分:3)
http://jsfiddle.net/te69783s/1/
.main-banner-wrapper img {
height: 500px;
width: 100%;
object-fit: cover;
position:absolute;
top:0;
left:0;
}
.container-fluid {
height:500px;
}
答案 1 :(得分:1)
使用CSS可以实现几乎相同的效果。
一些小的CSS更改:
将transition: opacity 1s ease-in-out;
添加到.main-banner-wrapper img
并添加以下CSS:
.container-fluid .active-banner img {
opacity:1; }
.container-fluid img {
opacity:0; }
并从jQuery中删除.fadeOut()
和.fadeIn()