jQuery 动画()
function toggle()
{
$("#Layer4").animate( { width:"20%"}, 1000 );
$("#Layer6").animate( { width:"20%"}, 1000 );
}
现在发生的情况是，Layer4 和 Layer6 见证了一些动画，但有趣的是高度发生了变化，而不是宽度发生了变化。
此外，一秒钟后，原始尺寸恢复。
为什么会出现这种情况？
--
<body onload="open()">
<div id="Layer4">
<img src="friend-line.jpg" width="243" height="380" />
</div>
<div id="Layer5" onClick="toggle()">
<img src="toggle_in.jpg" width="7" height="50" />
</div>
<div id="Layer6"></div>
</body>
function toggle()
{
$("#Layer4").animate( { width:"20%"}, 1000 );
$("#Layer6").animate( { width:"20%"}, 1000 );
}
Now what happens is that Layer4 and Layer6 witness some animation, but interestingly the height changes and not the width.
Also, after a second, the original dimensions are restored.
Why is this happening ?
--
<body onload="open()">
<div id="Layer4">
<img src="friend-line.jpg" width="243" height="380" />
</div>
<div id="Layer5" onClick="toggle()">
<img src="toggle_in.jpg" width="7" height="50" />
</div>
<div id="Layer6"></div>
</body>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我不相信使用 % 会得到一致的结果。尝试使用像素代替。如果必须使用 %，请确保周围没有宽度也以 % 设置的 div。我的猜测是这样的。
I don't believe you'll have consistent results using %. Try using pixels instead. If you must use % make sure that you don't have a surrounding div which the width is also set in %. My guess is that that is the case.
您不能将 div 的大小减小到小于 img 标记的大小。如果您想要这种行为，您需要将 img 标签替换为背景图像样式。
You can't reduce the size of the div by less than the img tag. If you want that behavior you'll need to replace the img tag with a background-image style.
尝试调整图像而不是其容器的大小...
甚至更好，使用像素而不是百分比，正如已经建议的那样。
Try resizing images instead of their containers...
And even better, use pixels instead of percents, as already suggested.