同時觸發多個jQuery動畫

我發現我的動畫需要很長時間才能執行（相互之間） - 實際上可以一次設置多個關閉動畫嗎？同時觸發多個jQuery動畫

發佈時間複製http://colourednoise.co.uk/closing/

什麼是目前發生的事情：淡入>展開>淡出 - 但前兩個步驟似乎停滯了一點。我可以合併到一起？即使它開始擴大以使整體更平滑的體驗，它會稍微淡化。

jQuery(document).ready(function() { 
    positionElements(); 

    var fontSize = 60, 
     goodbyeFadeIn = 1000, 
     goodbyeAnimation = 1500, 
     goodbyeFadeOut = 1000; 

    jQuery('#goodbye').fadeIn(goodbyeFadeIn, function() { 
     jQuery(this).animate({ 
      fontSize: fontSize 
     }, goodbyeAnimation, function() { 
      jQuery(this).fadeOut(goodbyeFadeOut, function() { 

       jQuery('#content').fadeIn(); 
      }); 
     }); 
    }); 
}); 

jQuery(window).resize(positionElements); 

function positionElements() { 
    var documentWidth = jQuery(document).width(), 
     documentHeight = jQuery(document).height(), 
     goodbyeWidth = jQuery('#goodbye').width(), 
     goodbyeHeight = jQuery('#goodbye').height(), 
     contentWidth = jQuery('#content').width(), 
     contentHeight = jQuery('#content').height(); 

    jQuery('#goodbye').css({ 
     left: (documentWidth/2) - (goodbyeWidth/2), 
     top: (documentHeight/2) - (goodbyeHeight/2) 
    }); 

    jQuery('#content').css({ 
     left: (documentWidth/2) - (contentWidth/2), 
     top: (documentHeight/2) - (contentHeight/2) 
    }); 
}

的另一個原因我想獲得淡入動畫與擴大混合，是因爲我發現在擴大的動畫非常..風聲鶴唳？

來源

2013-07-02 James Lawson

jquery中的動畫有queue的選項，默認爲true。如果false，動畫將立即運行，而不是等待前一個結束。你可以做這樣的事情：

$('#goodbye').fadeIn({duration: goodbyeFadeIn, queue: false}) // run outside of the queue 
      .animate({ // animate queued, but runs immediately as queue is currently empty 
       fontSize: fontSize 
      }, goodbyeAnimation) 
      .fadeOut(goodbyeFadeOut, function() { // fadeOut is queued and will run when animate finishes 
       jQuery('#content').fadeIn(); 
      });

http://jsfiddle.net/wyEwB/

注意的是，由於這種排隊行爲，你也沒必要巢所有這些動畫一個在另一個內的。他們可以簡單地鏈接在一起，並達到相同的效果。

來源

2013-07-02 20:41:55

或者，如果您有非常複雜的動畫，則可以使用多個隊列。儘管我不會爲你的例子提出這個不太複雜的例子。 –

感謝球員，釘了它。 –

同時觸發多個jQuery動畫

回答

相關問題