在jquery中的動畫

Question

有沒有一種方法可以有一個動畫序列，一個接一個在jquery中。舉例來說，我希望文字先淡入淡出，然後出現圖像。我提到了文檔，但它只有一個導致動畫的點擊事件的例子。

Answer 1

<div id="wow">Hello. This is text. Wow!!!</div>​ 

var $wow = $('#wow'); 

$wow.animate({fontSize: '150px'}, 'slow', function s() { 
    $wow.animate({padding: '50px', opacity: .1}, 'fast', function l() { 
     $wow.animate({background: '#f00', opacity: .5, padding: 0}, function r() { 
      $wow.animate({fontSize: 0, height: 1, width: 1, opacity: 0}, 10000); 
     }); 
    }); 
}); 

​jsfiddle.net/userdude/ZcATK/

Answer 2

這裏有一個例子JS Bin

HTML代碼：

<h3 style='display: none;'>Some text</h3> 
<img src='http://domain.com/image.png' style='display: none;'/> 

Javascript代碼：

$("h3").fadeIn(1000) 
     .fadeOut(1000, function(){ 
      $("img").fadeIn(1500); 
     }); 

Answer 3

聽起來你會從使用具有多個元素的隊列中受益。退房FxQueues jQuery插件https://github.com/lucianopanaro/jQuery-FxQueues

看看他們的示例代碼的使用：https://github.com/lucianopanaro/jQuery-FxQueues/blob/master/example.html