Jquery 在再次启用“单击”之前使动画完成

我有一组3个li项目，每个项目都单独滑入，每个项目都有一点延迟。如果单击“下一步”按钮，我不希望发生任何事情，但3个lis已经在制作动画

// when next is clicked
    $('.sh > .next').click(function() {

// slide in the individual lis
            $('div.active li').eq(0).animate({
                'left': 0,
                'right': 'auto'
            });
            $('div.active li').eq(1).delay(600).animate({
                'left': 100,
                'right': 'auto'
            });
            $('div.active li').eq(2).delay(1200).animate({
                'left': 200,
                'right': 'auto'
            });

});

---

如果动画正在进行，添加一个设置为

true

的标志

    var animating = false;
    var animationTime = 1800;  // Stores the duration of the animation

    $('.sh > .next').click(function() {
        if(!animating) {
            animating = true;
            $('div.active li').eq(0).animate({
                'left': 0,
                'right': 'auto'
            });
            $('div.active li').eq(1).delay(600).animate({
                'left': 100,
                'right': 'auto'
            });
            $('div.active li').eq(2).delay(1200).animate({
                'left': 200,
                'right': 'auto'
            });

            // Reset the flag, once the animation is complete.
            // This can also be done in a callback of the last animate().
            setTimeout(function() { 
                animating = false;
            }, animationTime);
       }
});

---

这里有一个例子：

你能演示一下你目前的情况吗。。？