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.