Question

我有以下jQuery脚本

如果单击带有id twitter的div，它会向右移动并放大，以便显示更多的Feed。右侧已存在的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时会发生什么。

enter image description here

一切正常！

然而，当我在推特动画完成之前点击另一个小div时，脚本表现得非常奇怪，div与其他人重叠......

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

我尝试使用变量和东西，但我的想法都没有用。

编辑：不幸的是，没有一个给定的答案有效。也许我做错了什么。我创建了一个jsfiddle，以便您可以看到问题并修复它：）

http://jsfiddle.net/ybFha/

Answer 1

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

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

这是未经测试的，我正在度假时使用我的上网本，希望这能让你有所了解。

Answer 2

最简单的方法是利用.data()方法在相关元素的父级上添加标记。

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

示例（假设父元素具有id“box-wrappers”）

$('#twitter').click(function() {
  if($('#box-wrappers').data('animating')) {
     return;
  }

  $('#box-wrappers').data('animating',1);

  [.. your animation code here ..]

  $('#box-wrappers').data('animating',0);

}）;

Answer 3

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

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

因此，如果你动画的所有块都被赋予了一个'movingBlock'类，如果一个是动画，那么在当前的一个动画完成之前，其他任何块都不会被允许动画。

Answer 4

我自己解决了

这是我的最终代码。

看起来很像Chris Hardie的回答，所以他得到了接受：）

$('#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;
                    });
                }
            }

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

4 个答案: