Animation in jquery

Question

Is there a way to have a sequence of animations, one following the other in jquery. Say for example i want text to fade in first then fades out and then an image appearing. I referred to the documentation but it had only examples of a click event resulting in animation.

Answer 1

It sounds like you would benefit from using a queue with multiple elements. Check out the FxQueues jQuery plugin https://github.com/lucianopanaro/jQuery-FxQueues

Check out their example code for usage: https://github.com/lucianopanaro/jQuery-FxQueues/blob/master/example.html

Answer 2

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

Here you have an example JS Bin

HTML code:

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

Javascript code:

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