我希望我的 jquery 动画等到鼠标进入 2 秒答案

【问题标题】：i want my jquery animation to wait till mouse enters for 2 second我希望我的 jquery 动画等到鼠标进入 2 秒
【发布时间】：2013-03-24 23:35:12
【问题描述】：

我希望我的 jquery 动画等到我的鼠标悬停/进入它大约 2 秒。否则，当我将图像放大时，事情会变得非常混乱。 2.这是我的代码，它使用jquery在执行mouseenter时使图像更大：

 $('img').mouseenter(function(){

     $(this).animate({
            height: '+=40px',
        width: '+=40px'
        });

});
$('img').mouseleave(function() {    

    $(this).animate({
            height: '-=40px',
        width: '-=40px'
        }); 

});

【问题讨论】：

试试.delay()函数api.jquery.com/delay

标签： jquery timeout jquery-animate wait mouseenter

【解决方案1】：

使用delay();

  $('img').mouseenter(function(){
     var _width = $(this).width();
    var _height = $(this).width();
     $(this).stop().delay(2000).animate({
            height: '+=40px',
        width: '+=40px'
     });
    $(this).mouseleave(function() {    

    $(this).stop().animate({
            height: _height+'px',
        width: _width+'px'
        }); 


});

});

已更新：http://jsfiddle.net/fwUMx/1165/

【讨论】：

好的，谢谢 :) 有了这个，问题就基本解决了。只剩下一个问题，当我快速从一张照片悬停到另一张照片并在第二张照片上停留 2 秒时，我不想放大第一张照片。使用延迟功能，当我从一张图片快速移动到另一张图片时，两张图片会放大：/.
@breght 明白了，所以你需要在鼠标移出时停止动画
@breght 现在尝试代码，我更新了答案；）我认为这是您需要的，您也可以使用 css();而不是 animate ，因为您没有在 animate() 中设置任何动画延迟
@breght 不客气，如果这是你需要的，别忘了检查答案 ;)
好的，我检查了答案是否正确；) stop() 函数是我真正需要的函数。再次感谢；）

【解决方案2】：

给你：

$('img').load(function() {
$(this).data('height', this.height);
}).bind('mouseenter mouseleave', function(e) {
$(this).stop().animate({
    height: $(this).data('height') * (e.type === 'mouseenter' ? 1.5 : 1)
});
});

现场演示http://jsfiddle.net/simevidas/fwUMx/5/

【讨论】：

【解决方案3】：

你可以在这里使用.delay()函数：

 $('img').mouseenter(function(){
    $(this).stop().delay(2000).animate({
        height: '+=40px',
        width: '+=40px'
     });
 });
 $('img').mouseleave(function() {    
     $(this).stop().delay(2000).animate({
        height: '-=40px',
        width: '-=40px'
     }); 
 });

【讨论】：

【解决方案4】：

您可以使用 .delay 或 setTimeout。

下面的例子使用.delay

<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>

$("button").click(function() {
      $("div.first").slideUp(300).delay(800).fadeIn(400);
      $("div.second").slideUp(300).fadeIn(400);
    });

div { position: absolute; width: 60px; height: 60px; float: left; }
.first { background-color: #3f3; left: 0;}
.second { background-color: #33f; left: 80px;}

http://jsfiddle.net/X5r8r/1118/

【讨论】：