ansaurus

Question

jQuery animate()

Answer 1

+1 A:

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.

Val 2010-10-02 18:48:52

Answer 2

+1 A:

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.

melhosseiny 2010-10-02 19:42:59

thanks :).Great explanation

Anant 2010-10-03 02:49:44

Answer 3

+1 A:

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.

Peter Ajtai 2010-10-02 23:27:11

ansaurus

tags:

views:

answers:

jQuery animate()

jsFiddle example

jsFiddle example

related questions