在悬停时更改图像，但仅在悬停一段时间后更改（jQuery）

我正在尝试更改图像，但仅在设置的时间段内悬停。我尝试过使用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');    
});

---

1：为计时器定义一个变量。
2：定义时间。
3：清除休假超时

var timer;
var delai = 500; // milliseconds

$('.pack-list li').hover(in, out);

function in(){    // Set timeout on enter

  timer = setTimout(function(){
    $(this).find('.pack-icon img').delay(1000).animate({
        width: 0,
        height: 0
      }, 100,

      // animate callback
      function() {
        // Animation complete.
        $(this).attr('src','images/download-icon.png');

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

function out() {    // Clear timout on leave
  $(this).find('.pack-icon img').attr('src','images/pack-icon.png');
  clearTimeout(timer); 
}

---

使用CSS3而不使用JavaScript是可能的

.container{
高度：100px；
宽度：100%；
背景颜色：绿色；
}
.站起来{
显示：内联块；
身高：0；
宽度：0；
背景色：红色；
}
.容器：悬停。上升{
动画：例如0.5s向前移动1s；
-webkit动画：示例0.5s轻松1s向前；
-o形动画：例如0.5s向前移动1s；
-moz动画：示例0.5s轻松1s向前；
}
.容器：悬停。上升：第n个子（2）{
动画：例如0.5s向前移动；
-webkit动画：示例0.5s轻松2秒向前；
-o形动画：例如0.5s向前移动；
-moz动画：示例0.5s减缓2s向前；
}
.容器：悬停。上升：第n个子（3）{
动画：例如0.5s向前移动1s；
-webkit动画：示例0.5s轻松3s向前；
-o-动画：示例0.5s向前移动3s；
-moz动画：示例0.5s轻松3s向前；
}
@关键帧示例{
0% {
高度：100px；
宽度：0；
}
100% {
高度：100px；
宽度：100px；
}
}

尽管使用jQuery可以实现这一点，但除非另有说明，否则我将主要选择CSS3选项。非常感谢您的帮助！必须制作两个动画，并相应地设置延迟，以便一个接一个地制作图像动画。你可以在这里看到结果，非常感谢你的帮助。我很感激！