jquery animation upper left to bottom right
<p>i tried working on this but couldn't solve it pls help....</p>

<p>the red rectangle will move from inside the upper left of the blue rectangle to the inside of the bottom right of the blue rectangle by using animation function when user clicks the button</p>

<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;home&lt;/title&gt;
&lt;style type="text/css" media="screen"&gt;
body {
    background:#B8BED4;
    text-align:center;
    color:white;
}
#container {
    margin:45px auto;
    padding:7px 0;
    background:blue;
    width: 400px; 
    height: 400px;
}
.clear {
    clear:both;
}
#alertContainer {
    float:right;
    text-align:left;
    width:400px;
}

#showText #alertFullText {
    display:inline;
    font-weight:normal;
     width: 100px; 
    height: 100px;
    color:red;
    border:1px solid red;
}
#showText{
border:1px solid red;
background-color: red;
}

&lt;/style&gt;
&lt;script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt; 
$(document).ready(function(){
 $("#showText").hide();

    $("#showText").click(function(){
 $("#showText").hide("slow");
     $("#alertFullText").hide();
 $("#alertContainer").animate({ "width": "400px" });
 $("#arrowLeft").show();
    });

    $("#alertContainer").click(function(){
 $("#showText").show('slow');
   $("#alertContainer").animate({
     width:"100%"
   }, 600, 'linear', function(){
       $('#alertFullText').fadeIn(1500);
   } );
 });

});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="container"&gt;

 &lt;div id="showText" style="width: 100px; height: 100px;"&gt;
     &lt;p id="alertFullText"&gt;&lt;/p&gt;

 &lt;/div&gt;
    &lt;div id="alertContainer"&gt;
    &lt;p class="alertTitle"&gt;

  &lt;input type="button" value="Hello world!"&gt;

 &lt;/div&gt;
    &lt;div class="clear"&gt;

    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
