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

听起来您会从使用具有多个元素的队列中受益。查看 FxQueues jQuery 插件https://github.com/lucianopanaro/jQuery-FxQueues

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

Answer 3

这里有一个示例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);
       });