javascript - 尝试创建连续的 on.click 事件

Question

我创建了一个初始的点击事件，它产生了图片的一部分。运行后，我将尝试创建另一个单击事件，该事件将继续生成图片的一部分。一旦初始点击事件运行，我创建的第二个事件就不会运行。我需要额外的“if”语句吗？到目前为止，这是我所拥有的，每个点击事件都有三个框架:

$(function() {
    var frames = $('#animation').children();
    var frameCount = frames.length;

    function startAnimation() { 
        var i = 0;
        var animationInterval = setInterval(function () { 
        if(i > frameCount - 1) {
            clearInterval(animationInterval);
        } else {
            frames[i % frameCount].style.display = "none";
            frames[i++].style.display = "inline";
        }
        },1000); 
    }

    $(frames[0]).on('click', startAnimation);


    var frames1 = $('#animation1').children();
    var frameCount1 = frames1.length;


    function continueAnimation() { 
        var i = 0;
        var animationInterval1 = setInterval(function () { 
        if(i < frameCount - 1) {
            clearInterval(animationInterval1);
        } else {
            frames1[i % frameCount1].style.display = "block";
            frames1[i++].style.display = "inline";
        }  
        },1000); 
    }

    $(frames[3]).on('click', continueAnimation);
});

Answer 1

这是我做的修复，检查一下

...

jsfiddle