jquery滑动/计时问题

Question

所以我设置了一个小的 jquery 动画，其中用户将鼠标悬停在容器上一段时间，这会导致容器拆分，然后显示里面的信息。

我不希望鼠标一进入容器就开始动画，所以我在动画上放了一个delay()。现在动画不会立即开始。

但是，有一个问题。如果您快速将鼠标悬停在该区域上，动画就会开始并开始非常快。

这里有一个 jsfiddle 来说明...... http://jsfiddle.net/Rh96d/

除非用户将鼠标悬停在蓝色区域上一段时间，否则我不希望播放动画。在此示例中，即使用户将鼠标从该区域移开，动画也会播放，这是不应该发生的。

对不起，如果我不够清楚。我不知道如何让它工作......

Answer 1

我是jQuery hoverIntent plugin 的忠实粉丝。

这是fiddle implementation。

包含插件后，您的脚本将更改为

function hoverIn () {
    $('#one').stop().animate({marginTop:'-250px'});
    $('#two').stop().animate({marginTop:'500px'});
}
function hoverOut () {
    $('#one').stop().animate({marginTop:'0px'});
    $('#two').stop().animate({marginTop:'0px'});
}
var config = {
    over: hoverIn,
    timeout: 0,
    out: hoverOut,
    interval: 600
};

$('#main').hoverIntent(config);    

Answer 2

解决方案示例：http://jsfiddle.net/Rh96d/8/

在这里，您正在设置一个函数，在 500 毫秒后触发。一旦鼠标离开该区域，关闭动画代码就会运行。

JavaScript

var myTimeout;
$('#main').mouseenter(function() {
    myTimeout = setTimeout(function() {
        $('#one').stop().delay(600).animate({marginTop:'-250px'});
        $('#two').stop().delay(600).animate({marginTop:'500px'});
        },function () {
    }, 5500);
}).mouseleave(function() {
    clearTimeout(myTimeout);
    $('#one').stop().animate({marginTop:'0px'});
    $('#two').stop().animate({marginTop:'0px'});
});

$('#main').mouseleave(function() {
    clearTimeout(myTimeout);
    $('#one').stop().animate({marginTop:'0px'});
    $('#two').stop().animate({marginTop:'0px'});
});​

​