ansaurus

Question

Answer 1

+1 A:

    $(".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"&gt;&lt;/script&gt; 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"&gt;&lt;/script&gt; 

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

Cipi 2010-07-01 09:59:11

i'm trying to wrap my head around it, i'll get it :) . for some reason your example doesn't work on my document but if i change color to opacity and remove the quotations i can animate the opacity, whats the prob there ?

andrei 2010-07-01 10:08:38

Try now? (check the edited answer under PS)

Cipi 2010-07-01 11:04:19

well yeah it was there in the first place ? i can't image where else it would go. in the head of the doc.

andrei 2010-07-01 12:21:39

Ok now I gave you an example that works for me... if that doesn't work for you, the problem is in your browser... I don't know what else could be the problem, so I also added the starting style for the H1 tags that has the starting black color... You can copy/paste the code under the P.S. part of my answer and save it to "animate.htm" file and run it and it should work...

Cipi 2010-07-01 13:26:10

ansaurus

tags:

views:

answers:

link jquery animations

related questions