jquery隊列測序動畫

我有下面的代碼顯示幻燈片。我的問題是，一個元素在下一個元素（淡入）之前沒有完全隱藏（淡入），導致我不得不使用CSS修復它，這不是理想的場景。這是代碼：jquery隊列測序動畫

setInterval(function() { 
    $('#slides > li:first') 
    .fadeOut(500) 
    .next() 
    .fadeIn(500) 
    .end() 
    .appendTo('#slidelist'); 
}, 2000);

我已經嘗試沒有成功如下：

setInterval(function() { 
    $('#slides > li:first') 
    .fadeOut(500).delay(500) 
    .next() 
    .fadeIn(500) 
    .end() 
    .appendTo('#slidelist'); 
}, 2000);

任何想法如何，我可以得到下一個消失之前完全淡出元素？

來源

2014-10-09 raphadko

可能是一個副本：http://stackoverflow.com/a/1065809/3464723 - 在那個線程中有很好的答案，肯定會幫助你。具體來說，檢查[.promise（）]（https://api.jquery.com/promise/） – 2014-10-09 05:11:54

如果您希望fadeIn在您之前的fadeOut完成後啓動，請使用回調函數參數執行fadeIn。回調函數將在第一個動作（fadeOut）完成後執行。

下面是一個2 divs-1淡出的示例，然後是1淡入。我在不透明度上使用了animate函數，它基本上與fadeIn/fadeOut相同。

人稱：
淡出：http://api.jquery.com/fadeout/
淡入：http://api.jquery.com/fadein/

的jsfiddle：http://jsfiddle.net/biz79/du9utty8/

var $divs = $('div'); 

$divs.eq(0).animate({"opacity":"0"},1000 , function() { 
    $divs.eq(1).animate({ "opacity":"1" },1000) 
})

希望你可以修改代碼應用該解決方案。如果沒有，發佈一個小提琴並讓我知道，我可以幫助調整您的代碼。

來源

2014-10-09 05:07:59 Will

我正在尋找我可以插入函數「鏈」的東西，因爲我使用next（）函數來獲取元素，如果我用回調中斷它的鏈，我想我可能不得不將當前元素存儲在變量中，並將當前代碼中的簡單性考慮在內。 – raphadko 2014-10-09 05:12:36

是的，我不確定在每次迭代中查詢dom是否比查詢一次更好，而是更新索引。無論哪種方式，讓我知道如果你找到一個更好/更優雅的解決方案。 – Will 2014-10-09 05:24:24

jquery隊列測序動畫

回答

相關問題