jQuery resize div box at hover
I've got two parts of code, to make 3 things:

 - resize at one time only one of 6 .boxes div (with it's text content)
 - make transparent .box divs which aren't selected
 - show hidden .more span

**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');
			});

But somethings is wrong. Only first of the boxes works quite good, but it's does'nt cover up other boxes when is resized. 

Effect of it You can see here: [jsFiddle][1] 

And my question: is it possible, to unify this code and make it works? :-[


  [1]: http://jsfiddle.net/cachaito/EMBPn/17/
jQuery resize div box at hover
===

I've got two parts of code, to make 3 things:

 - resize at one time only one of 6 .boxes div (with it's text content)
 - make transparent .box divs which aren't selected
 - show hidden .more span

**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');
			});

But somethings is wrong. Only first of the boxes works quite good, but it's does'nt cover up other boxes when is resized. 

Effect of it You can see here: [jsFiddle][1] 

And my question: is it possible, to unify this code and make it works? :-[


  [1]: http://jsfiddle.net/cachaito/EMBPn/17/