JQuery：比隊列更好的方法：false或div wrapper

這是我的情況。我試圖一次對單個元素執行多個動畫;然而，通過UI線程的「特性」和JQuery的動畫隊列，它變得很麻煩。JQuery：比隊列更好的方法：false或div wrapper

我正在爲一個站點設計一個可重用的控件庫，我想要做的事情之一是讓一個多類屬性系統在ready()上啓動不同的動畫。

例如：

<div class="fadein loadingbar"></div>

與CSS的圖像背景.loadingbar，然後JQuery的動畫加載杆的無限期背景：

$(".loadingbar").each(function(){ 
      $(this).css({backgroundPosition:"0px 0px"}); 
      $(this).animate({backgroundPosition:"(-65px 0px)"}, (($(this).height()/35) * 2000) + 600, "linear", function(){_n3_animLoadBars(this)}); 
     });

還有fadeIn()動畫.fadein類別：

$(".fadein").each(function(){ 
     $(this).css({opacity:0,visibility:"visible"}) 
     .animate({opacity:1}, {duration:1000}); 
    });

然而;讓他們異步動畫的唯一途徑是爲.animate()功能，直到我想延遲的正常工作淡入動畫做{queue:false}：

$(".fadein").each(function(){ 
      $(this).css({opacity:0,visibility:"visible"}) 
      .delay(800) 
      .animate({opacity:1}, {duration:1000,queue:false}); 
     });

這完全跳過.delay()呼叫，因爲它不是排隊（因此不會在fx堆棧的延遲之後放置動畫提示）。

唯一的解決方法是與另一個div來包裹格：

<div class="fadein"><div class="loadingbar"></div></div>

，並採取{queue:false}出來的，當然。

在這個作品中，JavaScript是據說將要足夠提前，從而標記沒有被這種混亂的（通常是一個簡單的div包裹那樣，我無所謂，但我設計這個爲我自己的娛樂和如果可能的話，我想把它保持在一個div）。

任何快速修復與我缺少的JQuery，或者有沒有辦法通過編寫一個插件來做到這一點？

任何見解都會有所幫助！

來源

2012-04-18 Qix

只是爲了澄清你想加載欄的不透明度和進度被同步？ – trickyzter 2012-04-18 16:49:11

是的 - 所以'.animation（）'調用這兩個類，以及調用'$（「。fadein」）塊的'.delay（）'調用。 – Qix 2012-04-18 16:50:17

因此，與此同時，.loadingbar類的動畫會觸發並播放，以及.fadein類的延遲調用會同時觸發並等待;然後*延遲結束後，第一個動畫仍在播放時，元素的淡入淡出動畫將異步發生。 – Qix 2012-04-18 16:52:41

找到了解決方案 - 比我想象的要容易。

我沒有在淡入淡出中指定{queue:false}，而是在背景動畫中指定它，而淡入淡出排隊。

來源

2012-04-19 23:42:49 Qix

JQuery：比隊列更好的方法：false或div wrapper

回答

相關問題