다른 동작이 실행되지 않도록하는 초 장황한 jquery 애니메이션 (10 초)

Question

글쎄, 이것은 자바 동기 동시성 문제에 대해 일반적으로 가지고있는 정반대의 문제입니다.

이번에는 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 초 더 기다리십시오, 그리고 마침내 TV처럼 깜박 거립니다.

어쨌든, 클릭 이벤트 :

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

나는 spectrum() 루프를 해제 문제가 사라집니다. 보고 복용에 대한

감사 :

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

이 전달 무엇 매개 변수를 결정하는 .stop() doco를 참조 - 나 ': D는