Question

I am using jQuery (version 1.6.2) to generate an animation that works well on FF3+, IE9, and current versions of Chrome and Opera (still can’t find older versions as standalone).

On standalone versions of IE7 and IE8 the jQuery library does not seem to function, after checking with FireBug, JScript returns the error: Invalid argument: jquery-latest.js, line 18 character 20327 which corresponds to: ?a.elem.style[a.prop]=.

I assume that this is a problem with the standalone versions of IE, but I currently have no way to check. The standalone package I am using is the http://utilu.com IE collection.

I also tried adding: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> but with no success.

The jQuery code:

$(document).ready(function(){
  $("nav menu a").click(function(){
    var oArticle = $("#" + $(this).attr("class"));
    oArticle.fadeIn({
      duration: 2500,
      queue: false
    }).animate({
      width: "500px",
      height: "auto"
    }, {
      duration: 2500,
      queue: false,
      easing: 'linear',
      complete: function(){
        $("header").css("height", oArticle.css("height"));
      }
    });
    return false;
  });
});

And the corresponding markup:

<nav>
  <menu>
    <li><a href="about.htm" class="profile">Profile</a></li>
    <li><a href="contact.htm" class="contact">Contact</a></li>
    <li><a href="projects.htm" class="projects">Project Gallery</a></li>
    <li><a href="resources.htm" class="resources">Resources</a></li>
  </menu>
</nav>

Other then the script above, there are no other JavaScript code being called from that page, other then the jQuery library (http://code.jquery.com/jquery-latest.pack.js).

Answer 1

.animate({
    width: "500px",
    height: "auto"
}

You can’t animate to auto.

Doing that causes an error in both IE7/IE8, I just tested it.

If you do need to animate to auto, you’ll have to use a workaround, like in my answer here.