jQuery .animate fade going nuts

StackOverflow https://stackoverflow.com/questions/23499845

質問

Complete noob to jQuery here. Its syntax is very different from other languages so I am having a bit of a hard time with it. I managed to get it to do the small part I needed it to, which is changing the background color of the page on hover.

However, the buttons that I am hovering over are very close to each other and if you quickly move from one button to another the fade animations will pile up and continue to change the background color even after you stop moving the mouse over the buttons.

<!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',});
    }   
);

});

I have also tried changing the OUT effect of the .hover() function to 

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

But that still did not solve my problem.

How can I make that little glitch go away if someone moves between buttons too quick? Any help is greatly appreciated, thank you!!

役に立ちましたか？

解決

you can try using $('body').stop().animate instead of $('body').animate

他のヒント

This is how I've done it in the past:

var Animating = false; // Set a variable

Before the Animation:

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

On complete:

Animating = false; // Set false
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top