title: jQuery animate()
body: <p>My code is as given below :</p>
  <pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;     &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
  &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
  &lt;head&gt;
  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot; /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;style type=&quot;text/css&quot;&gt;
  &lt;!--
  #Layer1 {
   position:absolute;
   width:200px;
   height:115px;
   z-index:1;
   left: 445px;
   top: 64px;
  }
  --&gt;
  &lt;/style&gt;
  
  &lt;script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/jquery-latest.min.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
  function toggle()
  
  {
  
  $(&quot;#Layer1&quot;).animate({width:&quot;20px&quot;},1000);
  
  }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload=&quot;toggle()&quot;&gt;
  &lt;div id=&quot;Layer1&quot;&gt;&lt;img src=&quot;friend-line.jpg&quot; width=&quot;243&quot; height=&quot;380&quot; /&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>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.</p>