Jquery动画，禁用动画直到完成

我有以下jQuery脚本

如果单击id为twitter的div，它会向右移动并放大，以便显示更多提要。右侧已经存在的div变小，并移到左侧，以填充twitter div所填充的位置

$('#twitter').click(function() {
if(groot != '#twitter'){
    topv = $("#twitter").css("top");
    $('#twitter').animate({
        left: '475',
        top: '16',
        height: '414' 
    }, 1000, function() {
    });
    $(groot).animate({
        left: '8',
        top: topv,
        height: '128'
    }, 1000, function() {
        groot = '#twitter';
    });
}
});

为了让事情更清楚一点，我创建了一个图片来说明当我点击twitter div时会发生什么

这一切都很好

然而，当我在twitter动画完成之前点击另一个小div时，脚本的行为非常奇怪，div相互重叠等等

在twitter div动画完成之前，禁用单击另一个小div的可能性的最佳方法是什么

我试着处理变量和其他东西，但我的想法都不起作用

编辑： 不幸的是，所有给出的答案都不起作用。 也许我做错了什么。 我创建了一个JSFIDLE，这样您就可以看到问题并可能解决它：）

---

您需要设置一个标志，询问您是否希望在单击时运行动画：

var isMoving = false;

现在稍微调整处理程序以检查标志，这将确保在第一个动画完成之前，动画不会被另一个动画中断

 $('#twitter').click(function() {
 if(isMoving == false){
     isMoving = true;
 if(groot != '#twitter'){
     topv = $("#twitter").css("top");
    $('#twitter').animate({
        left: '475',
        top: '16',
        height: '414' 
    }, 1000, function() {
 });
 $(groot).animate({
    left: '8',
    top: topv,
    height: '128'
 }, 1000, function() {
    groot = '#twitter';
 });
 isMoving = false;
 }
}
});

---

这是未经测试的，我正在度假时使用我的上网本，希望这能给你一个想法。

最简单的方法是利用

.data（）

方法在相关元素的父元素上添加一个标志

因此，当任何单击处理程序激发时，它首先检查标志是否已设置-如果未设置，则设置标志并开始设置动画。否则，只需忽略单击即可。动画完成后，重置标志

示例（假设父元素的id为“box wrappers”）

---

}))

您可以添加一个整体处理程序，以防止新动画发生（如果已在进行中）：

if($('.movingBlock:animated').length == 0){
  ... run an animation
}

因此，如果要设置动画的所有块都有一个“movingBlock”类，如果其中一个正在设置动画，则在当前块完成之前，不允许其他块设置动画。

我自己解决了这个问题

这是我的最终代码

看起来很像克里斯·哈迪的答案，所以他得到了接受：）

---

我试过了，但不幸的是，它不起作用，也许我做错了什么。你能检查一下我的指纹吗？好东西！出于可读性的考虑，我建议给你的标志起一个有意义的名字，并且还要测试

true

或

false

，因为这是一个布尔条件，因为0和1只是没有意义的幻数。

if($('.movingBlock:animated').length == 0){
  ... run an animation
}

$('#twitter').click(function() {
            if(groot != '#twitter'){
                topv = $("#twitter").css("top");
                if(anim != 1){
                    anim = 1;
                    $('#twitter').animate({
                        left: '475',
                        top: '16',
                        height: '414' 
                    }, 1000, function() {
                    });
                    $(groot).animate({
                        left: '8',
                        top: topv,
                        height: '128'
                    }, 1000, function() {
                        groot = '#twitter';
                        anim = 0;
                    });
                }
            }