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更改为纯黑色。网上的大多数例子都提出了一个非常相似的方法，所以我很好奇我在哪里犯了这个错误。

编辑8/27/13 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

不确定你在setTimeout尝试做什么，但是处于错误的位置。 hover接受两个函数，一个mouseover和一个mouseout。所以它应该是：

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

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

如果您要对setTimeout进行的操作产生延迟，可以在delay函数前添加animate：$('body').delay(1000).animate(....

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

Answer 2

要阻止动画队列构建您需要做的事，请在致电animate()之前致电stop()：

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

<强> Updated fiddle

Jquery悬停（mouseover）工作但悬停（mouseRemove）函数不加载

2 个答案: