Want to open a new page at the end of an animation

Want to open a new page at the end of an animation

I still haven't been able to figure this out through the jQuery directory, but I suspect the answer isn't that difficult;

I have a picture that links to a new page in my html. When the user clicks the image, I want a black box to wipe across the image, then load a new page. I can do one or the other, but I don't know how to do both. Here is my code as it is currently written:

  3. <style>
  4. .wipe2right {
  5. background-color: #111;
  6. position: absolute;
  7. top: 0px;
  8. width: 228px;
  9. height: 158px;
  10.         right: 0px;
  11. }
  12. </style>
  13. </head>

    15. <body id="page1">
  15. <p id="noScript">enable JavaScript, you moron!</p>
  16. <div class="extra">
  17.          <div class="main">
  18. <div class="menu">
  19. <ul id="clickme">
  20. <li class="m1"><a href="http://www.willyworld.org"><img  src="images/m1.jpg" border=0 /></a></li>
  21.                                         </ul>
  22.                                  </div>
  23.  </div>
  24.         </div>

  26.    <script src="jquery-1.5.js"></script>
  27.    <script>
  28.    $('document').ready(function() {
  29.   $('#noScript').remove();
  30.   $('<div class="wipe2right">&nbsp;</div>').appendTo('.m1');
  31.   $('.m1').ready(function(){ $('.wipe2right').animate( { width:0 }, 700, function() { }); });
  32.            $('.m1 img').mouseover(function(){ $(this).animate( { opacity:0 }, 250, function() { }); });
  33.   $('.m1 img').mouseout(function(){ $(this).animate( { opacity:1 }, 350, function() { }) });
  34.            $('ul').click(function(){ $('.wipe2right').animate( { width:228 }, 350, function() { }) });
  35.    });

  37.    </script>
  38. </body>