Animation crashes in IE

Animation crashes in IE

jQuery version: v1.4.2

I've built an animation using jQuery which works fine in FF and Safari. When I test in IE 7 or 8 I keep getting the following JS error when starting the animation:

Message: Invalid argument.
Line: 5613
Char: 8
Code: 0
URI: Desktop/espiritu/js/jquery.min.js

I could swear that this was working just fine in IE7/8 at one point. I went back through my history and reverted some changes I made and I even tested an old copy of the file in its known working state, but I am still getting the same error.

This is the script I built for my animation:

  1. $(".forward").toggle
     (function(){
     $("#page_titles").hide("slow");
     $(".portbox1, .portbox2, .portbox3, .portbox4").animate({ 
     
     height: "98px",
     opacity: 1,
           marginTop: "109px",
     border: "1px solid #666",
     }, 200 );

     $(".portbox1").animate({ 
     
     left: "0px",
     }, 200 );

     $(".portbox3").animate({ 
     
     left: "224px",
     }, 400 );

     $(".portbox4").animate({ 
     
     left: "336px",
     }, 600 );

     $("#page_titles").animate({ 
     
     marginTop: "220px",
     }, 600 );

     $("#page_titles").show("fast");

     $(".portbox5, .portbox6, .portbox7, .portbox8").animate({ 
     
     height: "98px",
     opacity: 1,
           marginTop: "219px",
     border: "1px solid #666",
     }, 400 );

     $(".portbox5").animate({ 
     
     left: "0px",
     }, 200 );
     
     $(".portbox7").animate({ 
     
     left: "224px",
     }, 400 );

     $(".portbox8").animate({ 
     
     left: "336px",
     }, 600 );

     },function(){

     $("#page_titles").hide("fast");

     $(".portbox5, .portbox6, .portbox7, .portbox8").animate({ 
     
     left: "112px",
     }, 100 );
     $(".portbox5, .portbox6, .portbox7, .portbox8").animate({ 
     
     height: "0px",
     opacity: 0,
           marginTop: "0px",
     border: "1px solid #666",
     }, 200 );

     $(".portbox1, .portbox2, .portbox3, .portbox4").animate({ 
     
     left: "112px",
     }, 200 );
     $(".portbox1, .portbox2, .portbox3, .portbox4").animate({ 
     
     height: "0px",
     opacity: 0,
           marginTop: "0px",
     border: "1px solid #666",
     }, 200 );

     $("#page_titles").animate({ 
     
     marginTop: "0px",
     }, 400 );

     $("#page_titles").show("fast");


    });
    $(".reverse").click
     (function(){

     $("#page_titles").hide("fast");

     $(".portbox5, .portbox6, .portbox7, .portbox8").animate({ 
     
     left: "112px",
     }, 100 );
     $(".portbox5, .portbox6, .portbox7, .portbox8").animate({ 
     
     height: "0px",
     opacity: 0,
           marginTop: "0px",
     border: "1px solid #666",
     }, 200 );

     $(".portbox1, .portbox2, .portbox3, .portbox4").animate({ 
     
     left: "112px",
     }, 200 );
     $(".portbox1, .portbox2, .portbox3, .portbox4").animate({ 
     
     height: "0px",
     opacity: 0,
           marginTop: "0px",
     border: "1px solid #666",
     }, 200 );

     $("#page_titles").animate({ 
     
     marginTop: "0px",
     }, 400 );

     $("#page_titles").show("fast");


    });




































































































































I am new to jQuery so this script probably looks messy to most of you.

You can follow the link below and view the page in question. Click on the second "box" from the left (portfolio). In FireFox, you will see the animation work as it should. In IE you should get the error.

Any ideas?

http://bradybean.com/devel/espiritu/main2.html