Jquery animate() 函数不适用于 IE

Posted 2023-05-08

【中文标题】Jquery animate() 函数不适用于 IE

【英文标题】：Jquery animate() function does not work for IE

【发布时间】：2012-03-20 11:37:18

【问题描述】：

我正在使用 JQuery 中的 animate 函数来实现图像的放大/缩小功能。它适用于除 Internet Explorer 之外的所有浏览器。下面是代码 sn-ps，我使用的是 jquery-1.2.3.min.js。

对于解决此问题的任何帮助，我将不胜感激。提前致谢！

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

【问题讨论】：

尝试删除height:1773/height:1776之后的逗号。

@purmou - 没关系，我明白你的意思。我看错了。你是对的，那些逗号不应该在那里，但它们可能不会有问题。

我也看到了 IE 参数列表中多余逗号的问题。

【参考方案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.
  );
);
);

您需要以包含 px 的字符串形式提供新尺寸。有些浏览器会接受 int，但不接受 IE。

【讨论】：

这应该不是问题，因为它们是原始数字。 IE 接受不带单位的非字符串数字。

jquery 1.2.3 可能没有按预期处理它。他们现在是 1.7+，对吧？

【参考方案2】：

删除逗号至少在 IE9 中起到了作用。

Demo.

这是最终的 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.
    );
);​

【讨论】：

凯青 - 非常感谢您及时的建议！删除多余的逗号确实使它也适用于 IE。谢谢！

Purmou - 非常感谢您的及时建议！删除多余的逗号确实使它也适用于 IE。谢谢！