Question

我有蓝色div，应该在悬停在绿色div上时动画。

因此，如果将光标保持在绿色div上足够长的时间，则蓝色div会扩展。当您移开光标时，蓝色div会恢复原始大小。

但是如果你只是将鼠标快速移动到绿色div上，则不会发生任何事情。这部分行为正是我的问题所在。怎么解决？

$('#c').hover(function(){
    $('#nav').delay(150).animate({'top':'-=10px', 'left':'-=10px', 'width':'+=20px', 'height':'+=20px', 'background-color':'orange'}, {duration : 200});
    }, function() {
    $('#nav').stop(true).delay(150).animate({'top':'+=0px', 'left':'+=0px', 'width':'-=0px', 'height':'-=0px', 'background-color':'blue'}, {duration : 200});
});

$('#c').mouseleave(function(){
    $('#nav').animate({'top':'+=10px', 'left':'+=10px', 'width':'-=20px', 'height':'-=20px', 'background-color':'blue'}, {duration : 100});
});

Answer 1

您的方法可能在浏览器上很重要。我认为在这种情况下使用CSS3过渡会更好。尝试将这些规则应用于样式表：

#c {
    position: relative;
    width: 80px;
    height: 80px;
    background-color: blue;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
#c:hover, #c:focus {
    top: -10px;
    left: -10px;
    width: 100px;
    height: 100px;
    background-color: orange;
    -webkit-transition-delay: .2s;
    -moz-transition-delay: .2s;
    transition-delay: .2s;
}

当然你需要稍微改变一下。我分配了一些随机的静态宽度和高度值，因为我无法从您的代码示例中获取它们，但它的工作方式与您尝试实现的方式相同。

以下是工作示例： DEMO

<强>更新

我做了另一个例子，在你的代码中使用了CSS方法。对不起我之前错过了。 Take a look!

Answer 2

在这里，您可以在mouseleave事件中检查动画是否已完成： DEMO

var hovered=false;
$('#c').hover(function(){
    $('#nav').delay(150).animate({'top':'-=10px', 'left':'-=10px', 'width':'+=20px', 'height':'+=20px', 'background-color':'orange'}, 200,function(){
        hovered=true;
    });
    }, function() {
    $('#nav').stop(true).delay(150).animate({'top':'+=0px', 'left':'+=0px', 'width':'-=0px', 'height':'-=0px', 'background-color':'blue'},200);
});

$('#c').mouseleave(function(){
    if(hovered==true){
        hovered=false;
        $('#nav').animate({'top':'+=10px', 'left':'+=10px', 'width':'-=20px', 'height':'-=20px', 'background-color':'blue'},100);
    }
});

悬停和鼠标上的动画div延迟

2 个答案: