сверхдлинная анимация jquery (10 секунд), предотвращающая запуск других действий

Question

Что ж, это совершенно противоположная проблема, с которой я обычно сталкиваюсь в вопросах синхронности Javascript.

На этот раз у меня анимация jQuery работает в течение 10 секунд: на самом деле их довольно много. Я знаю, что это раздутый!

function spectrum() { 
    hue = (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 128)) + ',' + (Math.floor(Math.random() * 256));  
    $('#dubious').animate({boxShadow: "0px 0px 300px rgba(" + hue + ", 0.8) inset"}, 10000);
    $('.strip').animate({borderColor: "rgba(" + hue + ", 0.25)"}, 10000);
    $('.element').animate({boxShadow: "0px 0px 400px rgba(" + hue + ", 0.45)"}, 10000);
    $('#outer_container').animate({borderColor: "0px 0px 400px rgba(" + hue + ", 0.45)"}, 10000);
    $('#dubious_box').animate({boxShadow: "0px 0px 40px rgba(" + hue + ", 1)"}, 10000, function() {spectrum();});
}

.. в основном, он выбирает случайный цвет, а затем каждый из этих элементов переходит на этот оттенок в течение 10 секунд.

Снова, вероятно, слишком раздутый, чтобы быть ужасно практичным, но это просто ТАК ХОРОШО СМОТРЕТЬ ..

В любом случае, реальный проблемный ребенок - здесь .

Вы заметите, если вы нажмете одно из изображений в верхнем ряду (не пытайтесь щелкнуть остальные, это еще одна проблема, которую я выдумываю), и дождитесь около десяти секунд , вы получите всплывающее окно с развернутой версией изображения. Затем щелкните изображение еще раз и подождите еще десять секунд , и оно, наконец, начнет мигать, как телевизор.

В любом случае, событие клика:

$(".gallery_image").click(function() {
        $("#blowup").attr('src',$(this).attr('src'));
        $("#outer_container").animate({opacity: "1", height: "500"});
    });

Когда я выключаю цикл spectrum(), проблема исчезает.

Спасибо, что заглянули : D

Answer 1

Удалить спектр ();от нагрузки и использовать только при необходимости.

$(".gallery_image").click(function() {
        $("#blowup").attr('src',$(this).attr('src'));
        $("#outer_container").stop().animate({opacity: "1", height: "500"},
        function(){//Callback finish loading outer_container
            spectrum();
        });
});

$('#blowup').click(function() {
        $("#outer_container").stop().animate({opacity: "0", height: "0"}); 
});

Answer 2

Вы пытались остановить текущую анимацию для рассматриваемого элемента:

$(".gallery_image").click(function() {
     $("#blowup").attr('src',$(this).attr('src'));
     $("#outer_container").stop(true).animate({opacity: "1", height: "500"});
     // -------------------^^^^^^^^^^
});

См. .stop() doco , чтобы решить, какие параметры передать - я не уверен, что .stop(true) или .stop(true,true) лучше для вашей ситуации.

Если вы не вызываете .stop(), то вызов .animate() просто добавляет в конец существующую очередь анимации для этого элемента.

Answer 3

Следующий код работает хорошо, сочетая понимание и код из @nnnnnn и @ Praveen.

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

В следующем коде все циклические фоновые анимации анимации, запущенные на странице ( 4 ), останавливаются, затем заканчиваются еще одной анимацией (outer_container) перед добавлением новой анимациив его очередь.

После всего этого я должен спросить:

Можно ли завершить всю анимацию для всех элементов одной строкой jQuery?более или менее эффективно, чем останавливать их всех независимо?

$(".gallery_image").click(function() {
        $('#dubious').stop(true); //end all active animations --v
        $('.strip').stop(true);
        $('.element').stop(true);
        $('#dubious_box').stop(true); // --^
        $("#blowup").attr('src',$(this).attr('src'));
        $("#outer_container").stop(true).animate({opacity: "1", height: "500"},
        function() { //callback
            spectrum();
        });
    });

    $('#blowup').click(function() {
        $('#dubious').stop(true); //end all active animations --v
        $('.strip').stop(true);
        $('.element').stop(true);
        $('#dubious_box').stop(true); // --^
        $("#outer_container").stop(true).animate({opacity: "0", height: "0"})
    });