jQuery animate（）

我的代码如下：

          function toggle() { $("#Layer1").animate({width:"20px"},1000); }    
   

现在，当页面加载时，最初会有一个动画，但很快就会恢复第1层的维度。我想知道为什么会发生这种情况。 谢谢！

Answer 1

动画添加overflow:hidden的CSS overflow:hidden它的时候。 当它停止时， overflow会返回到之前的状态，所以你应该只是将overflow:hidden CSS永久地添加到#Layer1

另外，我建议您使用jQuery doc readyfunction而不是内联onload Javascript。

所以你的整个JS将是：

 $(function() { // <== doc ready $("#Layer1").css("overflow","hidden").animate({width:"20px"},1000); }); 

jsFiddle示例

---

我不太确定你要用你的代码完成什么，但是你也可以包含overflow:hidden在#Layer1 CSS中：

 #Layer1 { position:absolute; width:200px; height:115px; z-index:1; left: 445px; top: 64px; overflow:hidden; } 

使用上面的CSS，您可以使用原始代码，只需将其包装在doc ready中，然后从HTML中删除onload ：

 $(function() { // <== doc ready $("#Layer1").animate({width:"20px"},1000); }); 

jsFiddle示例

请注意，div的宽度小于图像的宽度。 不确定这是否有意。

Answer 2

它可能是因为你正在改变div宽度而不是img的宽度

最好的做法是在脚本上使用$(document).ready() ，而不是在body上使用onload

如果你不想改变图像大小但只是隐藏css上内容的重置你可以添加overflow: hidden;

否则我不明白为什么会出现问题。

Answer 3

实际上， Layer1的尺寸不会恢复。 但是，图像大小保持不变。 它在动画期间被剪切的原因是animate函数会自动添加一个overflow: hidden; 声明它的动画。

 if ( opt.overflow != null ) { this.style.overflow = "hidden"; } 

一旦动画停止， overflow就会恢复到visible的默认值。 如果你想让它保持剪裁，只需在你的#Layer1 CSS规则中添加一个overflow: hidden声明。

Answer 4

使用百分比（％）代替图像宽度中的像素（px）。 因为在px中给出图像宽度时，它会保留图像的固定宽度。 当您以百分比（％）给出时，图像的宽度除以其父元素。 您的代码应如下所示：

单击此处以了解有关图像的jQuery动画的更多信息