jQuery悬停动画-如何在鼠标离开时正确停止

我的问题是，当我将鼠标快速移动到正方形元素上，然后将光标移出时，它有时无法完成悬停函数的“mouseout”部分

我的HTML：

<div id="wrapper">
    <div id="o1" class="square"></div>
    <div id="o2" class="square"></div>
</div>

Javascript:

$(function(){
    var o1 = $("#o1");
    var o2 = $("#o2");
    $('#wrapper').hover(function() {
        o1.fadeOut(400,function () {
            o2.fadeIn(400);
        });
    }, function() {
        o2.fadeOut(400,function () {
            o1.fadeIn(400);
        });
    });
});

jsFiddle：

---

我尝试在代码的不同位置使用带有不同参数的

stop（）

，但没有成功。谢谢

让我们假设o1是可见的，o2是隐藏的。如果我们快速地来回移动，会发生以下情况：

• o1开始淡出
• 氧气开始消失-立即消失，已经隐藏
• o1被告知淡入，这是o2淡出的结果
• o2被告知会淡入，这是o1淡出的结果

得到的结果是两个形状同时可见。这随后会导致进一步的不一致

您需要做的是在mouseover/mouseout上设置一个标志，该标志定义鼠标是否位于

#包装上。您也有类似的fadeIn/fadeOut指令，就像现在一样。但是对于回调，运行一个函数读取标志并确定需要淡入哪个对象

$(function(){
    var o1 = $("#o1");
    var o2 = $("#o2");
    var over = false;
    choose = function() {
        if (over) {
            o2.fadeIn(400);
        } else {
            o1.fadeIn(400);
        }
    }
    $('#wrapper').hover(function() {
        over = true;
        o1.fadeOut(400,choose);
    }, function() {
        over = false;
        o2.fadeOut(400,choose);
    });
});

jshiddle:
让我们假设o1是可见的，o2是隐藏的。如果我们快速地来回移动，会发生以下情况：


o1开始淡出
氧气开始消失-立即消失，已经隐藏
o1被告知淡入，这是o2淡出的结果
o2被告知会淡入，这是o1淡出的结果

得到的结果是两个形状同时可见。这随后会导致进一步的不一致

您需要做的是在mouseover/mouseout上设置一个标志，该标志定义鼠标是否位于
#包装上。您也有类似的fadeIn/fadeOut指令，就像现在一样。但是对于回调，运行一个函数读取标志并确定需要淡入哪个对象

$(function(){
    var o1 = $("#o1");
    var o2 = $("#o2");
    var over = false;
    choose = function() {
        if (over) {
            o2.fadeIn(400);
        } else {
            o1.fadeIn(400);
        }
    }
    $('#wrapper').hover(function() {
        over = true;
        o1.fadeOut(400,choose);
    }, function() {
        over = false;
        o2.fadeOut(400,choose);
    });
});

jsIDLE:
停止实际上解决了问题（如果这是您想要的效果）：

}))；
​

停止实际上解决了问题（如果这是您所追求的效果）：

}))；
​

因为有两个不同的队列同时运行，让它们停止是个问题。我提出的一个解决方案是创建一个可以控制、停止等的队列。。Javascript如下所示：

var o1 = $("#o1");
var o2 = $("#o2");
var wrapper = $('#wrapper');

function funcToFadeInOutDequeue(jq, isIn) {
    if (isIn) {
        return function() {
            jq.fadeIn(400, function() {
                wrapper.dequeue();
            });
        };
    } else {
        return function() {
            jq.fadeOut(400, function() {
                wrapper.dequeue();
            });
        };
    }
}

wrapper.hover(function() {
    wrapper.stop(true);
    wrapper.queue( funcToFadeInOutDequeue(o1, false) );
    wrapper.queue( funcToFadeInOutDequeue(o2, true) );
}, function() {
    wrapper.stop(true);
    wrapper.queue( funcToFadeInOutDequeue(o2, false) );
    wrapper.queue( funcToFadeInOutDequeue(o1, true) );
});

请参阅…
，因为有两个不同的队列同时运行，所以让它们停止是一个问题。我提出的一个解决方案是创建一个可以控制、停止等的队列。。Javascript如下所示：

var o1 = $("#o1");
var o2 = $("#o2");
var wrapper = $('#wrapper');

function funcToFadeInOutDequeue(jq, isIn) {
    if (isIn) {
        return function() {
            jq.fadeIn(400, function() {
                wrapper.dequeue();
            });
        };
    } else {
        return function() {
            jq.fadeOut(400, function() {
                wrapper.dequeue();
            });
        };
    }
}

wrapper.hover(function() {
    wrapper.stop(true);
    wrapper.queue( funcToFadeInOutDequeue(o1, false) );
    wrapper.queue( funcToFadeInOutDequeue(o2, true) );
}, function() {
    wrapper.stop(true);
    wrapper.queue( funcToFadeInOutDequeue(o2, false) );
    wrapper.queue( funcToFadeInOutDequeue(o1, true) );
});

请参阅…
我想到的最简单的解决方案是确保在添加任何新动画之前停止所有队列：

var o1 = $("#o1");
var o2 = $("#o2");
$('#wrapper').hover(function() {
    o2.stop(true, true);
    o1.stop(true, true);
    o1.fadeOut(400,function () {
        o2.fadeIn(400);
    });
}, function() {
    o1.stop(true, true);
    o2.stop(true, true);
    o2.fadeOut(400,function () {
        o1.fadeIn(400);
    });
});

请注意，停止队列时，顺序很重要。考虑以下顺序：

    o1.fadeOut(400,function () {
        o2.fadeIn(400);
    });
    o2.stop(true, true); // at this point, o1 can still queue a new animation onto o2
        // at this point, o1 might finish fadeOut() and begin o2.fadeIn()
    o1.stop(true, true); // We should have stopped this one first

我想出的最简单的解决方案是确保在添加任何新动画之前停止所有队列：

var o1 = $("#o1");
var o2 = $("#o2");
$('#wrapper').hover(function() {
    o2.stop(true, true);
    o1.stop(true, true);
    o1.fadeOut(400,function () {
        o2.fadeIn(400);
    });
}, function() {
    o1.stop(true, true);
    o2.stop(true, true);
    o2.fadeOut(400,function () {
        o1.fadeIn(400);
    });
});

请注意，停止队列时，顺序很重要。考虑以下顺序：

    o1.fadeOut(400,function () {
        o2.fadeIn(400);
    });
    o2.stop(true, true); // at this point, o1 can still queue a new animation onto o2
        // at this point, o1 might finish fadeOut() and begin o2.fadeIn()
    o1.stop(true, true); // We should have stopped this one first

停止（true，true）
应该注意it@charlietfl-这也意味着回调中的淡入将停止。@adeneo…在我不知道的两个函数中使用时；看不出会出现什么问题
stop（true，true）
应该注意it@charlietfl-这也意味着回调中的淡入将停止。@adeneo…在我不知道的两个函数中使用时；I don’我看不出有什么问题需要一个简单的解决方案，但是试着把鼠标移得更快一些。它的行为不正确。这似乎是一个简单的解决方案，但请尝试将鼠标移动得更快。它不会正常工作。。