How to Trigger a new event after one event has ended

I am having a bit of trouble with my jquery at the moment what i want to be able to开发者_运维百科 follow this process:

• The page loads and the image animates
• I click the link and the images do an different animation
• I click the link again and it starts another animation.

Here is the code I am currently using:

    <script type="text/javascript">
        $(document).ready(function () {
            $('img').fadeIn(100).addClass('stage1');
            $("#next").click(function () {
                $('img').addClass('stage2');
            });
        });
   </script>


   <a href="#" id="next">Next</a>
     <ul>
       <li><img src="jquery.png" /></li>
       <li><img src="jquery.png"  /></li>
     </ul>

I hope this makes sense and any help you could give me would be greatly appreciated.

Thanks

Use the hasClass jquery function.

$("#next").click(function () {
    if($('img').hasClass('stage2'))
    {
       $('img').addClass('stage3');
    }
    else
       $('img').addClass('stage2');
});

Of course there are nicer ways to do this, but this will work.