javascript - 如何使用 jquery 一次交叉淡化一个 div

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。如果您想支持不支持某些属性的无前缀版本的浏览器，您可能需要通过自动前缀运行 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>