Остановить анимацию перестает работать, jQuery/hover

Я использую jQuery для анимации цветов фона 3 разных div, повторяющихся для создания сетки 3x3. Все хорошо, за исключением того, что анимация наведения / остановки, кажется, перестает работать, если время наведения увеличивается за секунду.

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

Может ли кто-нибудь помочь объяснить, как работает функция наведения/остановки при попытке одновременного управления несколькими функциями?

Поскольку единственный способ показать работающий jQuery — через JSfiddle, я дал ссылку на рабочий пример здесь: http://jsfiddle.net/Commandrea/KbLDq/3/

        function pixelColors(){
    var color = '#'+(Math.random()*0xFFFFFF<<0).toString(16);

    $('.logo').animate({
    backgroundColor: color
    }, 1000, pixelColors);

    }

    function pixelColors2(){
    var color = '#'+(Math.random()*0xFFFFFF<<0).toString(16);

    $('.logo2').animate({
    backgroundColor: color
    }, 2000, pixelColors2);

    }

    function pixelColors3(){
    var color = '#'+(Math.random()*0xFFFFFF<<0).toString(16);

    $('.logo3').animate({
    backgroundColor: color
    }, 1500, pixelColors3);

    }


    $('#logo_back').hover(
    pixelColors,
    function() {
    $('.logo').stop()
    }
    );

    $('#logo_back').hover(
    pixelColors2,
    function() {
    $('.logo2').stop()
    }
    );

    $('#logo_back').hover(
    pixelColors3,
    function() {
    $('.logo3').stop()
    }
    );


    .header {
    position: relative;
    margin: 0 auto;
    }


    #home_header {
    position: relative;
    z-index: 7;
    }

    .pixCol {
    float: left;
    height: 288px;
    margin-right: 20px;
    margin-top: 12px;
    min-height: 1px;
    padding-left: 15px;
    width: 227px;
    }



    #pixelBox {
    left: 14px;
    position: relative;
    top: 20px;
    }

    .logo {
    height: 69px;
    width: 69px;
    z-index: 8;
    background-color:#9C3;
    display:inline-block;
    float:left;
    background-color:#F60;
    }


    .logo2 {
    height: 69px;
    width: 69px;
    z-index: 8;
    background-color:#9C3;
    display:inline-block;
    float:left;
    background-color:#F90;
    }

    .logo3 {
    height: 69px;
    width: 69px;
    z-index: 8;
    background-color:#9C3;
    display:inline-block;
    float:left;
    background-color:#F33;
    }

    .logo_back{
    background:none;
    height: 220px;
    margin-top: 51px;
    position: absolute;
    width: 229px;
    z-index: 9;
    }

    .logo_back2 {
    background: url("images/logo/batterEmpty.png") no-repeat scroll 0 0 transparent;
    height: 220px;
    margin-top: 51px;
    position: absolute;
    width: 229px;
    z-index: 9;
    }

    ​


    <div class="header">
    <div class="pixCol">
    <div id="home_header">
    <div id="logo_back" class="logo_back"></div>
    <div id="pixelBox">

    <div class="logo"></div>
    <div class="logo2"></div>
    <div class="logo3"></div>
    <div class="logo3"></div>
    <div class="logo"></div>
    <div class="logo2"></div>
    <div class="logo2"></div>
    <div class="logo3"></div>
    <div class="logo"></div>

    </div>
    </div>
    </div>
    </div>
    ​

javascript animation jquery-hover
person Commandrea    schedule 03.07.2012    source источник
comment
Вы все равно должны вставить сюда код из своей скрипки.   -  person Robert Harvey    schedule 03.07.2012

Ответы (2)


arrow_upward
2
arrow_downward

Меня очень смущает ваш код, почему вы запускаете 3 анимации одновременно? [редактировать: О, я вижу, что они находятся на разных элементах] Независимо от того, почему это не останавливается — вы необходимо вызвать stop(true), чтобы остановить анимацию в очереди, а поскольку вы постоянно запускаете 3 анимации одновременно, в очереди много анимаций. Просто передайте true, и ваша скрипка работает нормально.

person bhamlin    schedule 03.07.2012
comment
Привет, Бхамлин. Спасибо, ваше «истинное» предложение решило проблему. Все цвета начинают меняться в тот момент, когда кто-то наводит курсор, и есть три разные функции (временные вариации). Что бы вы предложили в качестве лучшего метода вызова анимации? - person Commandrea; 03.07.2012

arrow_upward
3
arrow_downward

Вы можете использовать одно событие наведения вместо трех и уже знаете, что stop(true) решит проблему.

 $('#logo_back').hover(
     function(){
         pixelColors();
         pixelColors2();
         pixelColors3();
     },
    function() {
        $('.logo, .logo2, .logo3').stop(true);
    }
);

ДЕМО.

person The Alpha    schedule 03.07.2012