0

我有以下 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 的可能性的最佳方法是什么？

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

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

http://jsfiddle.net/ybFha/

4

4 回答 4

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

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

于 2013-09-11T12:11:40.850 回答
0

最简单的方法是利用该.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);

});

于 2013-09-11T12:13:14.010 回答
0

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

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

所以，如果你所有要动画的块都被赋予了一个“movingBlock”类，如果一个正在动画，在当前动画完成之前不允许其他人动画。

于 2013-09-11T12:16:52.207 回答
0

我自己解决了

这是我的最终代码。

看起来很像克里斯哈迪的回答，所以他得到了接受:)

$('#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;
                    });
                }
            }
于 2013-09-11T14:16:03.243 回答