title: jQuery resize div box at hover
body: <p>I've got two parts of code, to make 3 things:</p>
  
  <ul>
  <li>resize at one time only one of 6 .boxes div (with it's text content)</li>
  <li>make transparent .box divs which aren't selected</li>
  <li>show hidden .more span</li>
  </ul>
  
  <p><strong>CODE:</strong></p>
  
  <pre><code>    $('.content_area div').hide();
  
          $(function(){
              $('.box').bind('mouseover',function() {
                  $(this).addClass('up');
                  $('.box').not('.up').fadeTo('normal',0.2);
              });
              $('.box').bind('mouseout',function() {
                  $('.box').removeClass('up').fadeTo('normal',1);
              });
          });
  
          initwidth = $('.box').width();
          initHeight = $('.box').height();
  
          $('.box').hover(function(){
              $(this).children('.more').show();
              $(this).stop().animate({width: '220', height: '140'},{queue:false, duration:'fast'}).css('font-size', '1.2em');
          }, function(){
              $(this).children('.more').hide();
              $(this).stop().animate({width: initwidth, height: initHeight},{queue:false, duration:'fast'}).css('font-size', '1em');
          });
  </code></pre>
  
  <p>But somethings is wrong. Only first of the boxes works quite good, but it's does'nt cover up other boxes when is resized. </p>
  
  <p>Effect of it You can see here: <a href="http://jsfiddle.net/cachaito/EMBPn/17/" rel="nofollow">jsFiddle</a> </p>
  
  <p>And my question: is it possible, to unify this code and make it works? :-[</p>