Question

这是我有的标记

<div class="container">
  <div class="eachFloor">
    <input type="checkbox" />
    <div class="floor"></div>
  </div>
  <div class="eachFloor">
    <input type="checkbox" />
    <div class="floor"></div>
  </div>
  <div class="eachFloor">
    <input type="checkbox" />
    <div class="floor"></div>
  </div>
  <div class="eachFloor">
    <input type="checkbox" />
    <div class="floor"></div>
  </div>
  <div class="eachFloor">
    <input type="checkbox" />
    <div class="floor"></div>
  </div>
  <div class="elevator"></div>
</div>

这是我有的CSS

.container
{
width: 500px;
margin-left: 100px;
position:relative;
}

.floor
{
width: 400px;
background: #eee;
border-bottom: 1px solid black;
height: 110px;
}

.elevator
{
background: #000;
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
width: 360px;
height: 75px;
}

input[type="checkbox"]
{
float:right;
margin-left: 100px;
margin-top: 50px;
}

如上所示我有一系列的复选框，当我点击其中一个我应该动画（animate：top属性）和div.elevator应该去的地板复选框位于，当我在动画运行时点击其中一个复选框时我应该能够检查电梯是否已通过当前楼层，如果它没有通过当前楼层，我应该停在该特定楼层的电梯约一秒或两秒，然后继续上一个动画。

假设电梯位于第五层（底层），所以我说我点击1楼，然后当动画运行时我点击3楼，如果电梯没有通过3楼（让我们说当我点击复选框时，它在4楼，我应该能够停止动画：在三楼顶部大约一秒或两秒，然后继续前一个动画到第一层（从第三层开始）地板，这是电梯的当前位置。）

如果我像这样进行动画调用

$(".container").on("click", "input:checkbox", function (event) {
  $(".elevator").animate({
    top: $(this).parent().offset().top
  }, {
    duration: 6000
  });
});

然后动画到3级将在它到达第一层之后发生，因此它不会在中间停止（原因是动画排队等待元素）。但是，如果我正确维护fx队列，就像点击1级楼层复选框一样，我可以做到这一点我有动画：从顶层到1楼，然后在点击3级时我需要有一些神奇的移动排在第3层的动画首先在队列中（如果地板没有通过，然后在那里停下电梯大约一两秒钟），然后从3楼运行1楼动画。

我如何在jquery队列，clearQueue和其他jquery方法中执行此操作？我很好，如果我需要使用插件暂停/恢复我的动画....任何帮助将不胜感激！

Answer 1

这就是你需要的

$(function(){
     $(".container").on("click","input:checkbox",function(event){
         var pos = $(this).next().position().top;
         var elPos =  $(".elevator").position().top;
         $(".elevator").animate({marginTop: pos-elPos },6000);
    });
});

http://jsfiddle.net/vadXa/

jquery队列动态添加动画

1 个答案: