My code is as given below :
<!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>
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!
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
Additionally, I suggest that you use the jQuery doc ready functionality instead of the inline onload Javascript.
So your entire JS would be:
$(function() { // <== doc ready
$("#Layer1").css("overflow","hidden").animate({width:"20px"},1000);
});
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;
}
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 example
Note that the width of the div is smaller than the width of the image. Not sure if this is on purpose.
its possibly because you are changing the div width and not the width of the img
also is best practice to use $(document).ready() on the script than using onload on body
if you do not wish to change the image size but just hide the reset of the contents on your css u can add overflow: hidden;
otherwise i cn't see why there should a problem.
Actually, the dimensions of Layer1 are not restored. However, the image size remains the same. The reason it's clipped during the animation is that the animate function automatically adds an overflow: hidden; declaration to whatever it's animating.
if ( opt.overflow != null ) {
this.style.overflow = "hidden";
}
As soon as the animation stops, overflow is back to the default value which is visible. If you want it to remain clipped, just add an overflow: hidden declaration to your #Layer1 CSS rule.
use percentage(%) in place of pixel(px) in your image width. Because while you give image width in px , it retains the fixed width of the image. And while you give it in percentage(%),The image's width divided by its parent element. Your code should be like following :
<body onload="toggle()">
<div id="Layer1"><img src="jquery-drag-drop/images/rrr.jpg" width="100%" /></div>
</body>
来源：https://stackoverflow.com/questions/3846874/jquery-animate