代码之家 › 专栏 › 技术社区 › breght

我想让我的jquery动画等待2秒钟,直到鼠标进入

mouseenter wait jquery-animate timeout jquery

breght · 技术社区 · 13 年前

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

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

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

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

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

});

4 回复 | 直到 13 年前

itsme 13 年前

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

John 13 年前

干得好:

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

Jai 13 年前

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

vinothini 13 年前

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