jQuery animate()
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>
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.
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...
$('#Layer4 img').animate( { width:'20%'}, 1000 );
$('#Layer6 img').animate( { width:'20%'}, 1000 );
And even better, use pixels instead of percents, as already suggested.
加载中,请稍侯......
精彩评论