超长jquery动画（10秒），防止其他动作触发

这与我通常遇到的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秒钟内转变为该色调

再说一次，可能过于臃肿而不太实际，但它只是

不管怎样，真正的问题是孩子

你会注意到，如果你点击最上面一行中的一个图片（不要尝试点击其余的，这是我正在解决的另一个问题），然后等待大约10秒钟，你会看到一个弹出窗口，里面有放大版的图片。然后再次单击图片，再等待10秒钟，它最终会像电视一样闪烁

无论如何，单击事件：

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

当我关闭

spectrum（）

循环时，问题就消失了

---

感谢您查看：D

您是否尝试停止有关元素的当前动画：

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

请参阅以决定传入哪些参数-我不确定

.stop（true）

或

.stop（true，true）

是否更适合您的情况

如果不调用

.stop（）

，则调用

.animate（）

只会将该元素添加到现有动画队列的末尾。

删除频谱（）；仅在需要时使用

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

---

下面的代码运行良好，将@nnnnnn和@Praveen的洞察和代码结合在一起

该代码适用于背景中有循环变色动画的库（当用户单击缩略图时，背景中的动画必须停止，单击操作发生，背景动画再次启动。当用户单击图像或按Esc关闭图像时，也会发生同样的情况）

下面的代码是页面（4）上运行的所有循环背景动画停止的地方，然后在将新动画添加到其队列之前结束另一个动画（

outer\u container

）

在这一切之后，我必须问：

是否可以用一行jQuery结束所有项目上的所有动画？这会比单独停止它们更高效还是更低效

---

感谢您的帮助！事实上，我确实希望

spectrum（）

能够持续运行。我使用了您的想法，但没有从onload中删除

spectrum（）

，并将其放在

的回调中。单击
函数以获得
。gallery\u image
和
放大
。感谢您的解释。停止（）给我。
。停止（真）
最后工作得很好。我在上面发布了工作代码。
$(".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"})
    });