jQuery animate() [英] jQuery animate()
问题描述
我的代码如下:
<!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层的尺寸.我想知道为什么会这样.谢谢！
Now, as the page loads, initially there is an animation,but soon enough the dimensions of Layer 1 are restored.I'd like to know why this is happening. Thanks!
推荐答案
动画在运行时会添加overflow:hidden的CSS.停止时，overflow返回其先前状态，因此您只需将overflow:hidden CSS永久添加到#Layer1
The animation adds the CSS of overflow:hidden while it's going. When it stops, the overflow goes back to its previous state, so you should simply permanently add the overflow:hidden CSS to #Layer1
此外，我建议您使用jQuery doc ready功能，而不要使用内联onload Javascript.
Additionally, I suggest that you use the jQuery doc ready functionality instead of the inline onload Javascript.
因此您的整个JS将是:
So your entire JS would be:
$(function() { // <== doc ready
$("#Layer1").css("overflow","hidden").animate({width:"20px"},1000);
});
jsFiddle示例
我不确定您要用代码完成什么，但是您也可以在CSS中为#Layer1包含overflow:hidden:
jsFiddle example
I'm not quite sure as to what you're trying to accomplish with your code, but you could also include the overflow:hidden in you CSS for #Layer1:
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 445px;
top: 64px;
overflow:hidden;
}
使用上述CSS，您可以使用原始代码，只需将其包装在文档中，然后从HTML中删除onload:
With the above CSS you can use your original code, just wrap it in a doc ready and remove the onload from the HTML:
$(function() { // <== doc ready
$("#Layer1").animate({width:"20px"},1000);
});
jsFiddle示例
请注意，div的宽度小于图像的宽度.不知道这是否是故意的.
jsFiddle example
Note that the width of the div is smaller than the width of the image. Not sure if this is on purpose.
这篇关于jQuery animate()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
