jQuery 动画（）答案

【问题标题】：jQuery animate()jQuery 动画（）
【发布时间】：2010-10-02 17:50:07
【问题描述】：

我的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
 position:absolute;
 width:200px;
 height:115px;
 z-index:1;
 left: 445px;
 top: 64px;
}
-->
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function toggle()

{

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

}
</script>
</head>

<body onload="toggle()">
<div id="Layer1"><img src="friend-line.jpg" width="243" height="380" /></div>
</body>
</html>

当页面加载时，会有一个动画，但很快，第 1 层的尺寸就会恢复。我想知道为什么会这样。

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

动画在播放时添加了overflow:hidden 的CSS。当它停止时，overflow 会回到之前的状态，因此您只需将overflow:hidden CSS 永久添加到#Layer1

另外，我建议您使用 jQuery 文档就绪功能而不是内联 onload Javascript。

所以你的整个 JS 将是：

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

jsFiddle example

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

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

使用上面的 CSS，您可以使用您的原始代码，只需将其包装在准备好的文档中并从 HTML 中删除 onload：

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

jsFiddle example

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

【讨论】：

【解决方案2】：

这可能是因为您正在更改 div 的宽度而不是 img 的宽度

在脚本上使用$(document).ready() 比在body 上使用onload 也是最佳实践

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

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

【讨论】：

【解决方案3】：

其实Layer1的维度并没有恢复。但是，图像大小保持不变。它在动画期间被剪辑的原因是animate 函数会自动将overflow: hidden; 声明添加到动画中。

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

一旦动画停止，overflow 就会恢复为默认值visible。如果您希望它保持剪裁，只需将 overflow: hidden 声明添加到您的 #Layer1 CSS 规则即可。

【讨论】：

【解决方案4】：

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

   <body onload="toggle()">
        <div id="Layer1"><img src="jquery-drag-drop/images/rrr.jpg" width="100%" /></div>
    </body>

Click here to know more about jQuery animation with Images

【讨论】：