Jquery 悬停（鼠标悬停）工作，但悬停（mouseRemove）功能不加载

Question

您好，这是我对 stackoverflow 的第一个合法问题，如果我搞砸了一些社会政策，请原谅我。我正在开发 Jquery，我正在使用这些插件。

    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.color-2.1.0.min.js"></script>

要使这部分代码工作：

$(document).ready(function () {
    var timeout;
    $('.twitter').hover(

    function () {
        timeout = setTimeout(

        function () {
            $('body').animate({
                "background-color": "#dd4b39"
            }, 400);
        },

        function () {
            $('body').animate({
                "background-color": "#000000"
            }, 400);
            clearTimeout(timeout);
        });
    });
});

Here's a JSFiddle

代码将激活悬停效果并将 div 更改为柔和的红色，但当您将鼠标移离 div 时，它不会将 div 更改为纯黑色。这个网上的大多数例子都表明了一种非常相似的方法，所以我很好奇我在哪里犯了这个错误。

编辑 2013 年 8 月 27 日 18:28 EST

我想历史是必要的，我的原始代码是一个非常简单的函数，但它存在在移动到下一个动画之前构建动画函数队列的问题。

Here's an example（在两个 div 之间快速移动鼠标）

$(document).ready(function(){
    $('.twitter').hover(
        function() {$('body').animate({"background-color":"#00aced"}, 400);},
        function() {$('body').animate({"background-color":"#232323"}, 400);}
    );
    $('.facebook').hover(
        function() {$('body').animate({"background-color":"#3b5998"}, 400);},
        function() {$('body').animate({"background-color":"#232323"}, 400);}
    );
});

我认为我已经正确构建了一个超时函数，如果您启动了一个新的悬停函数，它将停止前一个悬停函数的动画，从而阻止动画的建立。

Answer 1

要阻止动画队列建立你需要做的就是在调用animate()之前调用stop()：

$('.twitter').hover(
    function() {$('body').stop().animate({"background-color":"#00aced"}, 400);},
    function() {$('body').stop().animate({"background-color":"#232323"}, 400);}
);

Updated fiddle

Answer 2

不太确定你想用setTimeout 做什么，但位置错误。 hover 接受两个函数，一个 mouseover 和一个 mouseout。所以应该是这样的：

$(document).ready(function () {
    $('.twitter').hover(
        function () {
            $('body').animate({
                "background-color": "#dd4b39"
            }, 400);
        },

        function () {
            $('body').animate({
                "background-color": "#000000"
            }, 400);
        }
    );
});

如果您想要对setTimeout 执行的操作是创建延迟，您可以在animate 函数之前添加delay：$('body').delay(1000).animate(....

有关hover的更多信息：http://api.jquery.com/hover/