Jquery Animated Height
<p>I am working with the table having each cell have one div have effect on mouse over.. it work perfectly but i want it does not effect other cell /div .. mean other div do not moves when the moouse over div is growing it size.</p>

<pre><code>  &lt;style type="text/css"&gt;

  #maindiv{ 
height:130px; 
width:130px; 
border-radius:25px; 
border:#424284; 
border:thick; 
background:#CFCFE7;
 }

 #innerdiv{ 
width: 100px; 
height:100px; 
left:50%; 
border-radius:10px; 
border:outset; 
background:#8080C0; 
} 
.fon{ 
font:Calibri;
color:#0073AA;
font-weight:bold; 
font-size:12px; 
border-bottom-color:#90F; 
} 

#tabelbor {
 border-right:thick;
 border-right-color: #999; 
border-right:outset; 
} 

  &lt;/style&gt;
  &lt;script type="text/javascript" src="script/jquery-1.6.4.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="script/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;

  $("document").ready(function() { $("div[id =hide]").hide(); $("div[id=maindiv]").hover( function() { $(this).animate({ height: '+=30' , width: '+=20px'}, 'slow'
  ); $("div[id =hide]").show(); }, function() { $(this).animate({ height: '-=30px' , width: '-=20px'}, 'slow' ); $("div[id =hide]").hide(); } ); }); 

  &lt;/script&gt;

  &lt;title&gt;&lt;/title&gt;
  &lt;style type="text/css"&gt;
  div.c1 {text-align: center}
  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;div class="c1" id="maindiv"&gt;
          &lt;table height="20"&gt;
            &lt;tr&gt;
              &lt;td class="fon"&gt;Product Name&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;

          &lt;div id="innerdiv"&gt;&lt;/div&gt;

          &lt;div id='hide'&gt;
            &lt;table height="20"&gt;
              &lt;tr&gt;
                &lt;td class="fon" id="tabelbor"&gt;XMLTV&lt;/td&gt;

                &lt;td class="fon" id="tabelbor"&gt;XML&lt;/td&gt;

                &lt;td class="fon" id="tabelbor"&gt;CSV&lt;/td&gt;

                &lt;td class="fon"&gt;HTTP&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/td&gt;

      &lt;td&gt;
        &lt;div class="c1" id="maindiv"&gt;
          &lt;table height="20"&gt;
            &lt;tr&gt;
              &lt;td class="fon"&gt;Product Name&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;

          &lt;div id="innerdiv"&gt;&lt;/div&gt;

          &lt;div id='hide'&gt;
            &lt;table height="20"&gt;
              &lt;tr&gt;
                &lt;td class="fon" id="tabelbor"&gt;XMLTV&lt;/td&gt;

                &lt;td class="fon" id="tabelbor"&gt;XML&lt;/td&gt;

                &lt;td class="fon" id="tabelbor"&gt;CSV&lt;/td&gt;

                &lt;td class="fon"&gt;HTTP&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/td&gt;

      &lt;td&gt;
        &lt;div class="c1" id="maindiv"&gt;
          &lt;table height="20"&gt;
            &lt;tr&gt;
              &lt;td class="fon"&gt;Product Name&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;

          &lt;div id="innerdiv"&gt;&lt;/div&gt;

          &lt;div id='hide'&gt;
            &lt;table height="20"&gt;
              &lt;tr&gt;
                &lt;td class="fon" id="tabelbor"&gt;XMLTV&lt;/td&gt;

                &lt;td class="fon" id="tabelbor"&gt;XML&lt;/td&gt;

                &lt;td class="fon" id="tabelbor"&gt;CSV&lt;/td&gt;

                &lt;td class="fon"&gt;HTTP&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
