鼠标悬停时交叉淡入淡出 div

Question

我希望我的背景图像在鼠标悬停在每个菜单项上时发生变化。我的代码有效，但是，当图像 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

Answer 1

啊，你快到了。您只需要绝对位置以防止第一个在交叉淡入淡出时将下一个向下撞。

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

Answer 2

您可以使用 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()

查看示例 http://jsfiddle.net/m92aotbd/2/

鼠标悬停时交叉淡入淡出 div

Cross-fade div on mouse hover

jquery

html

css

fade