jquery - 更改悬停时的图像，但仅当悬停一段时间后才更改(jQuery)

Question

我正在尝试更改图像，但仅限于悬停一段时间。我尝试过使用delay()，这有点管用，但问题是，在鼠标移离元素后，悬停动画仍然会被触发。

这是我的代码

$('.pack-list li').hover(function() {

  $(this).find('.pack-icon img').delay(1000).animate({
    width: 0,
    height: 0
  }, 100, function() {
    // Animation complete.
    $(this).attr('src','images/download-icon.png');

    $(this).animate({
      width: 30 + "px",
      height: 36 + "px"
    }, 100, function() {
      // Animation complete.
    });
  });


}, function() {
  $(this).find('.pack-icon img').attr('src','images/pack-icon.png');    
});

Answer 1

使用 CSS3 是可能的 animations没有 JavaScript。

.container {
  height: 100px;
  width: 100%;
  background-color: green;
}

.rise {
  display: inline-block;
  height: 0;
  width: 0;
  background-color: red;
  
}

.container:hover .rise {
  animation: example 0.5s ease 1s forwards;
  -webkit-animation: example 0.5s ease 1s forwards;
  -o-animation: example 0.5s ease 1s forwards;
  -moz-animation: example 0.5s ease 1s forwards;
}
.container:hover .rise:nth-child(2) {
  animation: example 0.5s ease 2s forwards;
  -webkit-animation: example 0.5s ease 2s forwards;
  -o-animation: example 0.5s ease 2s forwards;
  -moz-animation: example 0.5s ease 2s forwards;
}
.container:hover .rise:nth-child(3) {
  animation: example 0.5s ease 1s forwards;
  -webkit-animation: example 0.5s ease 3s forwards;
  -o-animation: example 0.5s ease 3s forwards;
  -moz-animation: example 0.5s ease 3s forwards;
}

@keyframes example {
  0% {
     height: 100px;
     width: 0;
  }
  100% {
     height: 100px;
     width: 100px;
  }
}

<div class="container">
  <div class="rise"></div>
  <div class="rise"></div>
  <div class="rise"></div>
</div>

当光标在 1、2 和 3 秒内覆盖绿色 block 时，红色方 block 将依次显示。