jquery - 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

複数の要素を持つキューを使用することでメリットが得られるようです。FxQueuesjQueryプラグインをチェックしてくださいhttps://github.com/lucianopanaro/jQuery-FxQueues

使用法については、サンプルコードを確認してください：https ：//github.com/lucianopanaro/jQuery-FxQueues/blob/master/example.html

Answer 3

ここにJSビンの例があります

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);
       });