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

Question

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

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

Answer 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/

Answer 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/

Answer 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'
     }); 
 });

Answer 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/