這裏是標記我有jquery的隊列動態添加動畫
<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的方法?我很好,如果我需要使用插件暫停/恢復我的動畫太....任何幫助將不勝感激!
感謝您的答覆約翰但如果你在問題中提到我的條件檢查(即發生了什麼,當你已位於點擊一樓,你再次點擊3樓,但它不會停止在三樓,因爲動畫是排隊的)?你只是擔心我相信的保證金。我將添加CSS我有問題,然後它會清楚。 – 2013-02-09 10:15:23