Question

我正试图在悬停另一个div时连续交叉淡化图像div。我错过了一些东西，因为它不是在悬停时改变图像而是淡入和淡出同一个div。任何帮助将不胜感激。

这是fiddle。

$('.card').hover(function() {
  var delay = 0;
  $('.fade-m').each(function() {
    var $fade = $(this);
    $fade.find(".front").fadeOut();
    $fade.find(".back").fadeIn();
    setTimeout(function() {
      $fade.find(".back").fadeOut();
      $fade.find(".front").fadeIn();
    }, delay += 500);
  });
});

.fade-m {
  position: relative;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
}
.fade {
  border: 1px solid red;
}
.front {
  display: block;
  z-index: 2;
}
.back {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
  <div class="hover-text">
    <h3>hover text</h3>
  </div>
</div>

<span class="fade-m">
       <div class="front">
          <img src="http://lorempixel.com/50/50">
       </div>
       <div class="back">
          <img src="http://lorempixel.com/60/60">
       </div>
    </span>

<span class="fade-m">
       <div class="front">
          <img src="http://lorempixel.com/50/50">
       </div>
       <div class="back">
          <img src="http://lorempixel.com/60/60">
       </div>
    </span>

Answer 1

我相信这是你想要的，但它不使用jQuery，只是纯CSS3。如果要支持不支持某些属性的未加前缀版本的浏览器，则可能需要通过autoprefixer运行CSS。

.fade-m {
  position: relative;
  display:block;
}
/* Make all transtions on the img last .5 seconds */
.fade-m img {
  transition: 0.5s all;
}
/* place the back img in the same spot as the front img */
.fade-m .back img {
  position: absolute;
  top: 0;
}
/* Make sure the front img is always on top of the back img */
.fade-m .front img {
  position: relative;
  z-index: 2;
  opacity: 1;
}
/* Change opacity of the front img to 0 on hover */
.card:hover ~ .fade-m .front img {
  opacity: 0;
}

/* Delay the transition on hover of the second .fade-m by .5 seconds */
.card:hover + .fade-m + .fade-m img {
  transition-delay: .5s;
}

<div class="card">
  <div class="hover-text">
    <h3>hover text</h3>
  </div>
</div>

<span class="fade-m">
  <div class="front">
    <img src="http://lorempixel.com/g/50/50">
  </div>
  <div class="back">
    <img src="http://lorempixel.com/50/50">
  </div>
</span>

<span class="fade-m">
  <div class="front">
    <img src="http://lorempixel.com/g/50/50">
  </div>
  <div class="back">
    <img src="http://lorempixel.com/50/50">
  </div>
</span>

清洁版：

/* Only if you don't have similar in your normalize.css/reset.css */
.card ul { padding: 0; }

.card li {
  position: relative;
  height: 50px;
}

/* Make all transtions on the img last .5 seconds */
.card img {
  transition: 0.5s all;
}

/* place images in the same spot and visible */
.card li img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
}

/* Make sure the front img is always on top of the back img */
.card img:first-child {
  z-index: 2;
}

/* Change opacity of the front img to 0 on hover */
.card:hover img:first-child {
  opacity: 0;
}

/* Use this instead if you want the hover to only work on the h3 and not the entire card
.card h3:hover + ul img:first-child {
  opacity: 0;
}*/

/* Delay the transition on hover of the second .fade-m by .5 seconds */
.card:hover li:nth-child(2) img {
  transition-delay: .5s;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<div class="card">
  <h3>hover text</h3>
  <ul>
    <li>
      <img src="http://lorempixel.com/g/50/50">
      <img src="http://lorempixel.com/50/50">
    </li>
    <li>
      <img src="http://lorempixel.com/g/50/50">
      <img src="http://lorempixel.com/50/50">
    </li>
  </ul>
</div>

Answer 2

正如评论中所提到的，没有人真正清楚你正在寻找什么。我对它进行了一次拍摄，但最好是在黑暗中拍摄。

setTimeout(); 是非阻塞的，所以它不会像你在原始代码中那样延迟循环或迭代器的执行。你必须将函数包装在setTimeout（）或setInterval（）中执行，并在到达项目列表的末尾时将其停止。

根据我的想法，我想出了以下内容： http://jsfiddle.net/shzBu/11/

请告诉我这是否是您正在寻找的效果。

编辑 - 我误解了你的想法
看看这个网站是否有交叉淡入淡出CSS3的过渡！ http://css3.bradshawenterprises.com/cfimg/

如何使用jquery逐个交叉淡入div

2 个答案: