標籤：java 動畫 解決 rip src 結果 css color head
.queue() 顯示或操作匹配元素所執行函數的隊列。
所以它和那些常見的animate()、fadeIn()、fadeOut()、slideUp()、show()、hide()動畫函數，有什麼區別？
如果說，
$(‘#foo‘).slideUp().fadeIn();
當這條語句執行時，元素會立即開始其滑動動畫，但是淡入過渡被置於 fx 隊列，只有當滑動過渡完成後才會被調用。
這句話意思是，動畫會先開始執行滑動，再進行淡入過渡。
那麼用了queue()方法，能產生什麼不一樣的效果？
.queue() 方法允許我們直接對這個函數隊列進行操作。調用帶有回呼函數的 .queue() 方法特別有用；它允許我們在隊列末端放置一個新函數。
這個特性與動畫方法提供回呼函數類似，但是無需在動畫執行時設定回呼函數。
如果要執行的函數不僅僅是動畫，還有文檔操作比如append()，css屬性操作呢。
來實驗個最簡單的。
<style>
div {width:40px; height:40px;
background:green; }
.newcolor { background:blue; }</style><body><div> </div><script>$(document.body).click(function () { $("div").show("slow"); $("div").animate({left:‘+=200‘},2000); $("div").addClass("newcolor"); });</script></body>
這個動畫按照設定，是要這個 div 先緩緩出現，向右滑動，再執行css屬性操作，改變背景顏色為藍色。
然而這樣寫的結果，實際上是 div在出現前已經變成了藍色。
因為一系列的動畫函數會被放進一個隊列中，我們管他叫 ‘fx‘, 而非動畫函數，不會進入這個隊列，它會先於隊列函數執行。
而queue()就是來解決這個問題的。
queue()可以將非動畫函數加進隊列。
<style> div { margin:3px; width:40px; height:40px; position:absolute; left:0px; top:30px; background:green; display:none; } div.newcolor { background:blue; } </style> <script type="text/javascript" src="/jquery/jquery.js"></script></head><body> 請點擊這裡 ... <div></div><script>$(document.body).click(function () { $("div").show("slow"); $("div").animate({left:‘+=200‘},2000); $("div").queue(function () { $(this).addClass("newcolor"); $(this).dequeue(); }); $("div").animate({left:‘-=200‘},500); $("div").queue(function () { $(this).removeClass("newcolor"); $(this).dequeue(); }); $("div").slideUp(); });</script></body>
OK，這樣就達到了我們要的效果。
再看上面那句話：
調用帶有回呼函數的 .queue() 方法特別有用；它允許我們在隊列末端放置一個新函數。
這個特性與動畫方法提供回呼函數類似，但是無需在動畫執行時設定回呼函數。
文法： .queue(queueName,newQueue)
我們加入的函數其實是一個關於隊列的回呼函數。這個回呼函數可以放在動畫函數裡，作為動畫函數的回呼函數。
比如，queue隊列函數：
$(‘#foo‘).slideUp();$(‘#foo‘).queue(function() { alert(‘Animation complete.‘); $(this).dequeue();});
等價於：
$(‘#foo‘).slideUp(function() { alert(‘Animation complete.‘);});
好吧，總算理解了。
jQuery 隊列控制函數：.queue()
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
