CODEWITHSUNDEEP
jquery
andrei
andrei

Reputation: 8582

link jquery animations

I want to link several jquery animations one after the other but I'm having some issues. Let's presume this example:

<h1 class="first">This is the first paragraph</h1>  
<h1 class="second">This is the second paragraph</h1>

I want to turn the first one red then back to black then pass on and animate the second one the problem is i don't know how to link the two animations.

I should add that I'm getting messed up in the syntax can someone give me a more explicit example $(this).animate() where do i state the second part of the animation (ie return to the original state) and where do i insert the callback function (i think thats the name for the function that activates once the first one is complete)/

Upvotes: 0

Views: 63

Answers (1)

Cipi
Cipi

Reputation: 11353

    $(".first").animate({"color":"red"}, 500,
        function()
        {
              $(".first").animate({"color":"black"}, 500,
              function()
              {
                    $(".second").animate({"color":"red"}, 500,                
                    function(){
                        $(".second").animate({"color":"black"}, 500);
                    });
              });
        }
    );

Idea is to provide the callback function that will be called when the animation is done. So in the first case when the .first changes to red, it calls the given anonymous function, which turns it back to black, and then calls its anonymous callback function to turn .second to red... get it? =)

You can read more about.animate() here.

P.S.

Here is an example that works:

<!DOCTYPE html>

<html>
<head>  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script> 

    <script type="text/javascript">

        $(document).ready(function()
        {

             $(".first").animate({"color":"red"}, 500,
                function()
                {
                      $(".first").animate({"color":"black"}, 500,
                      function()
                      {
                            $(".second").animate({"color":"red"}, 500,                
                            function(){
                                $(".second").animate({"color":"black"}, 500);
                            });
                      });
                }
            );
        });
    </script>

</head>


<body>
    <h1 class="first" style="color: black;">This is the first paragraph</h1>  
    <h1 class="second"  style="color: black;">This is the second paragraph</h1>  
</body>

</html>

Upvotes: 1

Related Questions