Я хочу, чтобы моя jquery-анимация подождала, пока мышь не войдет в течение 2 секунд

Question

1. Я хочу, чтобы моя jquery-анимация подождала, пока моя мышь не зависнет/не войдет в нее около 2 секунд. В противном случае, когда я собираюсь сделать изображение больше, все станет действительно хаотичным. 2.here мой код, который использует 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/