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/