jquery的队列动态添加动画

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

所以如上所示我有一系列复选框当我在一个点击其中我应该动画（动画：顶级属性）和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楼，然后当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/