Завершите noob to jQuery здесь. Его синтаксис сильно отличается от синтаксиса других языков, поэтому у меня возникли трудности с ним. Мне удалось заставить его сделать небольшую часть, которая мне была нужна, а именно изменение цвета фона страницы при наведении курсора.

Однако кнопки, над которыми я наведен, очень близки друг к другу, и если вы быстро переходите от одной кнопки к другой, анимации затухания будут накапливаться и продолжать изменять цвет фона даже после того, как вы перестанете перемещать мышь по кнопкам.

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

});

Я также попытался изменить эффект OUT функции .hover () на

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

Но это все равно не решило мою проблему.

Как я могу избавиться от этого небольшого сбоя, если кто-то слишком быстро перемещается между кнопками? Любая помощь приветствуется, спасибо!

0
user3602886 6 Май 2014 в 20:15

2 ответа

Лучший ответ

Вы можете попробовать использовать $('body').stop().animate вместо $('body').animate

1
Ejaz 6 Май 2014 в 16:17

Вот как я это делал раньше:

var Animating = false; // Set a variable

Перед анимацией:

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

По завершении:

Animating = false; // Set false
0
Jamie Barker 6 Май 2014 в 16:28