0

嗨，这是我对 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);
        });
    });
});

这是一个 JSFiddle

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

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

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

这是一个示例（在两个 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);}
    );
});

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

4

2 回答 2

0

不太确定您要在那里做什么，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/

于 2013-08-27T22:04:49.950 回答
0

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

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

更新的小提琴

于 2013-08-27T22:59:37.663 回答