jquery div animation problem
<p>I have some question about jquery div animation. I want click the link, then div1 and div4 change the position. div2 and div3 change the position. the array postion is div1 div2 in the first line, div3 div4 in the second line. How to write correctly? Thanks.</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt; &lt;/title&gt;
&lt;script type="text/javascript" src="jquery-1.4.2.min.js"&gt;&lt;/script&gt;
&lt;style type="text/css"&gt;
body{width:100%;height:100%;margin:0;padding:0;}
.content{width:600px;margin-left:auto;margin-right:auto;padding:0;}
.div1,.div2,.div3,.div4{float:left; width:300px; height:200px;margin:0;padding:0;position:relative;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="content"&gt;
    &lt;div class="div4" style="background-color:#0f0;"&gt;&lt;a href="#" class="click"&gt;4&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="div3" style="background-color:#f00;"&gt;&lt;a href="#" class="click"&gt;3&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="div2" style="background-color:#0ff;"&gt;&lt;a href="#" class="click"&gt;2&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="div1" style="background-color:#ff0;"&gt;&lt;a href="#" class="click"&gt;1&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
$(function() {
   $('.click').each(function() {
      $(this).click(
          function() {
          $('.div1').stop().animate({ top: 200 , left: 300 });
             $('.div2').stop().animate({ top: 200 , left: 0 });
             $('.div3').stop().animate({ top: 0 , left: 300 });
             $('.div4').stop().animate({ top: 0 , left: 0 });
          })
      });
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt; 
</code></pre>

<p>can animate to the position which is relative to the div#content? for example, animate to top 200, left 300, just like write a new css rule, top 200px of the div#content anf left 300px of the div#content? Thank</p>
