Question

嗯，这是我通常遇到的与Javascript同步问题完全相反的问题。

这一次，我有一个运行10秒的jQuery动画：实际上，其中有不少。我知道它很臃肿！

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。

你会注意到，如果你点击其中一个图像在顶行（不要尝试点击其余图片，这是另一个我正在敲定的问题），并且等待大约十秒钟，你会得到一个爆炸版本的图片弹出窗口。然后再次点击图片，等待十秒钟，它最终会像电视一样眨眼。

无论如何，点击事件：

$(".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(true).animate({opacity: "1", height: "500"});
     // -------------------^^^^^^^^^^
});

请参阅.stop() doco以确定要传递的参数 - 我不确定.stop(true)或.stop(true,true)是否更适合您的情况。

如果你不调用.stop()，那么调用.animate()只会添加到该元素的现有动画队列的末尾。

Answer 2

删除频谱（）;来自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"}); 
});

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

超长jquery动画（10秒）阻止其他动作发射

3 个答案: