Jquery animate() function does not work for IE

问题

I am using the animate function in JQuery for zoom in/zoom out functionality on an image. It works fine on all browsers except for Internet Explorer. Below are the code snippets and I am using jquery-1.2.3.min.js.

I would highly appreciate any help with resolving this issue. Thanks in advance!

HTML:

<div class="mapImage">
    <p>
       <a href="#" id="zoomIn" class="in">Zoom In</a> 
       <a href="#" id="zoomOut" class="out">Zoom Out</a>
    </p>
    <div class="photo">
       <img alt="photo_map" id="pathwayImage" style="width:630px;height:1176px;" src="images/pathwayimage.jpg">
    </div>
</div>

JQuery:

$('a#zoomIn').click(function() {
  $('#pathwayImage').animate({
      width:950,
      height:1773,
  }, 500, function() {
  // Animation complete.
  });
});
$('a#zoomOut').click(function() {
  $('#pathwayImage').animate({
      width:630,
      height:1176,
  }, 500, function() {
    // Animation complete.
  });
});
});

回答1:

$('a#zoomIn').click(function() {
  $('#pathwayImage').animate({
    width:'950px',
    height:'1773px',
  }, 500, function() {
  // Animation complete.
});
});
$('a#zoomOut').click(function() {
  $('#pathwayImage').animate({
    width:'630px',
    height:'1176px',
  }, 500, function() {
    // Animation complete.
  });
});
});

You need to provide new dimensions as string with px included. Some browsers will accept int, but not IE.

回答2:

Removing the commas did the trick in IE9, at least.

Demo.

Here's the final jQuery that works:

$('a#zoomIn').click(function() {
    $('#pathwayImage').animate({
        width: 950,
        height: 1773
    }, 500, function() {
        // Animation complete.
    });
});
$('a#zoomOut').click(function() {
    $('#pathwayImage').animate({
        width: 630,
        height: 1176
    }, 500, function() {
        // Animation complete.
    });
});​

来源：https://stackoverflow.com/questions/9525300/jquery-animate-function-does-not-work-for-ie