Question

在这里完成jQuery noob。它的语法与其他语言有很大不同，所以我有点困难。我设法让它做我需要它的小部分，这是在悬停时改变页面的背景颜色。

然而，我正在盘旋的按钮彼此非常接近，如果你快速从一个按钮移动到另一个按钮，即使你不再将鼠标移到鼠标上方，渐变动画也会堆积并继续改变背景颜色。的按钮。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>index.html</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="bgcolor.js"></script>
    <link rel="stylesheet" type="text/css" href="css.css">
</head>

<body>

<div class='splash'>

    <div id='logoblock'>
        <img src='images/logo.png'>
    </div>

    <div id='menublock'>
        <a href='#' id='jabout'><div id='about'></div></a>
        <a href='#' id='jphoto'><div id='photo'></div></a>
        <a href='#' id='jinfo' ><div id='info'></div></a>
    </div>

    <div id='quoteblock'
        <p class=quote>"blah blah blah!"</p>
        <p class=author>- John Doe</p>
    </div>

</div>

</body>
</html>

bgcolor.js

// JavaScript Document

$(document).ready(function(){

$( "#jphoto" ).hover(
    function() {
        $('body').animate({ backgroundColor: '#bde2ff',}, 100);
    },
    function() {
        $('body').animate({ backgroundColor: '#d4e88f',});
    }   
);

$( "#jabout" ).hover(
    function() {
        $('body').animate({ backgroundColor: '#f5ff53',}, 100);
    },
    function() {
        $('body').animate({ backgroundColor: '#d4e88f',});
    }
);

$( "#jinfo" ).hover(
    function() {
        $('body').animate({ backgroundColor: '#fff4ff',}, 100);
    },
    function() {
        $('body').animate({ backgroundColor: '#d4e88f',});
    }   
);

});

我也尝试将.hover（）函数的OUT效果更改为

$('body').css('background', '#d4e88f');

但这仍然没有解决我的问题。

如果有人在按钮之间移动太快，怎么能让那个小故障消失呢？非常感谢任何帮助，谢谢!!

Answer 1

您可以尝试使用$('body').stop().animate代替$('body').animate

Answer 2

这就是我过去做过的事情：

var Animating = false; // Set a variable

动画之前：

if (!Animating) { // If not animating
Animating = true; // Set true

完成后：

Animating = false; // Set false

jQuery .animate逐渐消失

2 个答案: