Question

详细

我有一个内置动画的功能，点击按钮时.append div到body。然后div将动画其位置向下移动一点点。当添加另一个div时，所有div s也会向下移动，因此它们不会重叠。

现在我们遇到了问题！当垃圾邮件按钮创建.queue时，它们将重叠。

我们怎样才能阻止这种情况发生？

注意：

因此，只有当最后一个功能完成所有动画时，才能开始下一个呼叫
需要记住并运行您点击按钮的次数
我的插件中的功能包含需要记住的选项（例如弹出窗口背景的颜色）。

我尝试过什么

我看到的方式是，我希望创建一个队列，单击该按钮多少次，并在 x 时间过去后释放下一行（足以完成所有操作）动画）。问题是我无法在jQuery中找到一种方法。

我已经研究过在jQuery中使用setTimeout但是没有看到方法这可以帮助解决这个问题。
我在函数上添加了$("button").click(function() { $("body").append("<div></div>"); $($("div").get().reverse()).each(function(index) { $(this).animate({ top: "+=120px" }, { duration: 600, queue: false }); if (index >= 2) { // Fade out and then remove the item $(this).fadeOut("fast", function() { $(this).remove(); }); } }); });，但这会导致点击延迟

我觉得这是非常简单的事情，但是在我自己搞乱了几个小时之后我找不到解决方案。

演示

我已经为这个问题创建了一个演示，我的真实版本是一个插件，所以它是它自己的功能。这只是一个非常基本的版本。

div {
  width: 400px;
  height: 50px;
  background: rgba(0, 0, 0, .4);
  position: absolute;
  top: 0;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>

<form>
    <div class="form-group">
        <label for="sms">SMS</label>
        <textarea rows="5" class="form-control" id="sms" name="sms"></textarea>
        <span class="pull-right" id="smslength">0</span>
    </div>
    <button type="submit" class="btn btn-default">SMS Gönder</button>
</form>
<script type="text/javascript">
    $('#sms').keyup(function(){
        sms = $(this).val();
        $('#smslength').html(sms.length);
    })
</script>

JSFiddle Demo

Answer 1

尝试此解决方案....阻止动画直到动画回调

＆＃13;

animated = false;
$("button").click(function() {
  if(animated)
     return false;
  else
    animated = true;
  $("body").append("<div></div>");

  $($("div").get().reverse()).each(function(index) {
    $(this).animate({
      top: "+=120px",
      duration: 600,
      queue: false
    },function(){ animated = false; });

    if (index >= 2) {
      // Fade out and then remove the item
      $(this).fadeOut("fast", function() {
        $(this).remove();
        
      });
    }
  });
});

＆＃13;

div {
  width: 400px;
  height: 50px;
  background: rgba(0, 0, 0, .4);
  position: absolute;
  top: 0;
  right: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>

＆＃13;

这可能是管理动画队列的起点。

看看这个fiddle

Answer 2

将动画添加到队列：

var freeToAnimate = true;
var animationQueue = [];
var i = 0;
$("button").click(function () {   
    var queueLength = animationQueue.length;    
    animationQueue.push(i);
    i++;  
    if(queueLength == 0){        
        animateDivs(i-1);  
    } else {   
        return false;                  
    }
});

function animateDivs(animationIndex) {     
      if(freeToAnimate == true) {
          freeToAnimate = false;
          var divsAmount = $("div").length;
          $("body").append("<div></div>");   
          $($("div").get().reverse()).each(function(index, el) {          
              if(index >= 2) {
                  // Fade out and then remove the item
                  $(this).fadeOut( "fast", function() {
                      $(this).remove();       
                  });
              }       

              $(this).animate({
                  top: "+=120px"               
              }, 1200, function() {
                  var indx = animationQueue.indexOf(animationIndex);
                  animationQueue.splice(indx, 1);               
                  if(index == divsAmount-1 || divsAmount == 0) {                    
                      freeToAnimate = true;  
                      if(animationQueue.length != 0) {
                          animateDivs(animationIndex+1);
                      }                
                  }                 
              });         
         });       
      }          
}

https://jsfiddle.net/4zwmm20e/12/

具有动画的函数之间的延迟/队列

详细

我尝试过什么

演示

2 个答案: