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'});
});

jquery滑动/计时问题

2 个答案: