two rotating images fade onclick

two rotating images fade onclick

I have a total of two images. The first image, when click needs to fade into the second image. Then when the second image is clicked it needs to fade back into the first image. This should go on as long the user wishes to click.

Here is my code so far. The first image fade works fine, but I can't get it to fade back to the first image again after loading the second image.

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  7. <title>Sandbox</title>
  8. <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  9. </head>
  10. <body>
  11. <img src="rolled-up.png" id="picture" class="up" />
  12. <script type="text/javascript">
  13. $(".up").click(function() {
  14. $(".up").fadeOut("fast",function(){
  15.     $("#picture").load(function () { //avoiding blinking, wait until loaded
  16.         $("#picture").fadeIn();
  17.     });
  18.     $("#picture").attr("src","rolled-down.png");
  19. $("#picture").attr("class","down");
  20. });
  21. });

  23. $(".down").click(function() {
  24. $(".down").fadeOut("fast",function(){
  25.     $("#picture").load(function () { //avoiding blinking, wait until loaded
  26.         $("#picture").fadeIn();
  27.     });
  28.     $("#picture").attr("src","rolled-up.png");
  29. $("#picture").attr("class","up");
  30. });
  31. });
  32. </script>
  33. </body>
  34. </html>
Any idea on how to fully implement this?

Thanks in advance.