動畫返回從每（）爲了

元素我使用這個腳本動畫裏面錨一些圖片：動畫返回從每（）爲了

$('#locations a').each(function() { 
     // set opacity 0 take initial position 
     $(this).css('opacity', '0'); 
     var left = $(this).css('left'); 
     var top = $(this).css('top'); 

     // reset position and animate 
     $(this).css({'left' : '0', 'top' : '0'}); 
     $(this).animate({left: left, top: top, opacity: 1}); 
    });

我需要使用jQuery的每個（）函數來取初始位置。但是，我想按順序動畫返回的元素。那可能嗎？

來源

2010-07-11 sergio

您可以在不那麼複雜的方式做到這一點，是這樣的：

$('#locations a').each(function(i) { 
    var left = $(this).css('left'), 
     top = $(this).css('top'); 

    $(this).css({opacity: 0, left: 0, top: 0}) 
      .delay(400 * i) 
      .animate({left: left, top: top, opacity: 1}); 
});

You can test it here。這主要是簡化，唯一重要的補充是.delay(400 * i)和i到function(i) {。

這只是使用作爲第一個參數，以.each()的回調提供的i和倍量的每個元素（在此元件開始動畫前延遲）乘以.delay()。 400是default duration的.animate()是400ms。所以第一個元素立即開始，下一個在400ms，下一個在800ms，等等......當它之前的動畫應該完成時。

當然你也可以創建自定義的隊列，等...但是這似乎有點簡單:)

編輯：因爲你感興趣的建築隊列，它會尋找像這樣：

$('#locations a').each(function(i) { 
    var left = $(this).css('left'), 
     top = $(this).css('top'), 
     a = $(this).css({opacity: 0, left: 0, top: 0}); 

    $(document).queue('myQueue', function(n) { 
     a.animate({left: left, top: top, opacity: 1}, n); 
    }); 
}); 
$(document).dequeue('myQueue');

You can test it here，我們使用.queue()排隊在自定義排隊功能上document然後用.dequeue()踢它關閉。n是隊列中的下一個函數，我們在調用.animate()時將其作爲回調函數運行完成。。

來源

2010-07-11 23:37:42

感謝您的想法。我知道函數（索引）{}和.delay（），但乘以 *我是一個很好的技巧。我仍然想知道如何在每個（）內部構建自定義隊列，然後運行它 – sergio 2010-07-12 00:36:12

@NGAGE - 我添加了如何做到這一點，因爲您對該路線感興趣:) – 2010-07-12 00:45:30

非常感謝您花時間！在Firefox中它工作正常，但在第二個動畫（非常奇怪）後，IE8上出現了一個奇怪的錯誤。你可以在這裏看到一個生動的例子：http://bit.ly/cuhWIG – sergio 2010-07-12 10:12:35

你可以在jQuery中設置自己的自定義隊列。

http://api.jquery.com/queue/

所有要執行的功能填充您的隊列。
1. 隊列中的每個函數都是單個動畫。
2. 使用您的each（）循環來填充隊列。
啓動隊列以啓動第一個動畫。
在每個動畫函數的回調中，調用dequeue（）函數來啓動下一個動畫。根據您的評論

實例我創建了一個名爲「MyCustomQueue」的自定義隊列和我隨意把它放在身體標記。我使用JavaScript閉包通過設置一個名爲「this $」的變量來爲隊列的每個函數中的特定元素設置動畫。

<!DOCTYPE html> <html lang="en"> <head> <title>Queues Me</title> <style> a { position:relative; top:0; left:0; } </style> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function() { $('#locations a').each(function() { var this$ = $(this); // set opacity 0 and take initial position this$.css('opacity', '0'); var left = this$.css('left'); var top = this$.css('top'); // reset position and populate the queue with animations this$.css({ 'left': '420px', 'top': '1820px' }); $('body').queue("MyCustomQueue", function() { this$.animate({ left: left, top: top, opacity: 1 }, 500, function() { $('body').dequeue("MyCustomQueue"); }); }); }); $('body').dequeue("MyCustomQueue"); }); </script> </head> <body> <div> <div id="locations"> <ul> <li><a href="#">Foo</a></li> <li><a href="#">Moo</a></li> <li><a href="#">Poo</a></li> <li><a href="#">Woo</a></li> <li><a href="#">Zoo</a></li> </ul> </div> </div> </body> </html>

來源

2010-07-11 20:31:01 a7drew

$（ '＃位置A'）的每個（函數（）{// 設定不透明度0，並採取初始位置 $（本）的CSS（ '不透明度'， '0'）; VAR左= $（this）.css（'left'）; var top = $（this）.css（'top'）; //重置位置並使用動畫填充隊列 $（this）.css（{ 'left'：'420px'，'top'：'1820px'}）; $（this）.queue（function（）{ $（this）.animate（{left：left，top：top，opacity：1 }，500，function（）{$（this）.dequeue（）}）; }）; }）; 我填充隊列並在每一個上調用dequeue（）。我現在如何開始隊列？ – sergio 2010-07-11 21:55:48

謝謝...我得到它的工作！ – sergio 2010-07-13 10:00:26

動畫返回從每（）爲了

回答

相關問題