0

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).

silverstrike
  • 522
  • 2
  • 7
  • 1
    It's probably being caused by an attempt to set a CSS property to a value that IE doesn't like. It could be something happening during the animations, or it could be that attempt to set the height of the "header" element. I don't know which, because you didn't describe much about the behavior. – Pointy Aug 07 '11 at 13:13
  • Yes, changing the height from auto to 100% fixed it, thank you. – silverstrike Aug 07 '11 at 13:25

1 Answers1

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.

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349