jQuery animate() | 易学教程

问题

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!

回答1:

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.

回答2:

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.

回答3:

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.

回答4:

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>

Click here to know more about jQuery animation with Images

来源：https://stackoverflow.com/questions/3846874/jquery-animate

标签

jquery

jquery-animate