超長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秒內轉換爲該色調。

再次，可能過於臃腫是非常實用的，但它只是SO COOL LOOKING ..

無論如何，真正的問題孩子here。

你會發現，如果你點擊圖像的一個頂行中（不要試圖點擊休息，這是另一個問題，我正在敲定），並等待約10秒，你會得到一個彈出式的圖片放大版本。然後再次點擊圖片，然後等待10秒，最後它會像電視一樣閃爍。

不管怎麼說，單擊事件：

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

當我關掉spectrum()循環，問題消失。

感謝您抽空看看：d

Answer 1

以下代碼很好地結合了來自@nnnnnn和@Praveen的洞察和代碼。

代碼適用於在背景中有一個循環變色動畫的圖庫（當用戶單擊縮略圖時，背景中的動畫必須停止，發生點擊動作，並且背景動畫在再次踢。同樣，當用戶點擊圖像或按下ESC鍵以關閉圖像發生。

以下代碼是其中所有循環背景動畫動畫的頁上運行（）停止，則端在將新動畫添加到其隊列之前再添加一個動畫（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"}) 
    }); 

Answer 2

您是否嘗試過在問題停止元素的當前動畫：

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

見.stop() doco決定什麼參數在傳遞 - 我m不確定.stop(true)或.stop(true,true)是否適合您的情況。

如果您不打電話.stop()，則調用.animate()只會添加到該元素的現有動畫隊列的末尾。

Answer 3

刪除spectrum（）;從onload和僅在需要時使用。

$(".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"}); 
});