我想我的jQuery動畫等待，直到鼠標進入2秒

我想我的jquery動畫等待，直到我的鼠標懸停/進入它約2秒。否則，當我要讓圖像更大時，事情就會變得非常混亂。 2.here是我的代碼，它使用jQuery來使圖像更大時，它確實的mouseenter：我想我的jQuery動畫等待，直到鼠標進入2秒
```
$('img').mouseenter(function(){ 

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

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

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

}); 
```

2013-04-03 breght

嘗試'.delay（）'函數http://api.jquery.com/delay/ –

使用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/

來源

2013-04-03 10:39:28 sbaaaang

好，謝謝:)這個問題，問題幾乎解決了。只剩下一個問題，當我快速從一張照片懸停到另一張照片，並在第二張照片上停留2秒鐘時，我不希望第一張照片放大。使用延遲功能，當我從一張照片快速移動到另一張時，兩張照片會放大：/。 – breght

@breght瞭解，所以你需要停止動畫時mouseout – sbaaaang

@breght檢查，如果它可以爲你http://jsfiddle.net/fwUMx/1160/ – sbaaaang

這裏你去：

$('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/

來源

2013-04-03 10:40:30 John

@breght是你想要的代碼嗎？ – John

動畫在我的小提琴中完全沒有延遲。 –

可以使用.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' 
    }); 
});

來源

2013-04-03 10:40:38 Jai

您可以使用.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/

來源

2013-04-03 10:43:19 vinothini

我想我的jQuery動畫等待，直到鼠標進入2秒

回答

相關問題