CODEWITHSUNDEEP
jqueryjquery-animate
Anant
Anant

Reputation: 167

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>

As the page loads, there is an animation, but soon enough, the dimensions of Layer 1 are restored. I'd like to know why this is happening.

Upvotes: 5

Views: 7595

Answers (4)

Hardik Vyas
Hardik Vyas

Reputation: 500

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

Upvotes: 0

Peter Ajtai
Peter Ajtai

Reputation: 57715

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.

Upvotes: 9

melhosseiny
melhosseiny

Reputation: 10154

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.

Upvotes: 1

Val
Val

Reputation: 17542

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.

Upvotes: 1

Related Questions