I'm having the hardest time with this. I've tried a couple tutorials and nothing does the trick. I'm expanding the width and height of an image with jquery, but I want it to animate left, not right. Right now, it does a weird movement, in-between.

Code:
$(".square.three,#link_3little").mouseenter(function(){
  	if ($(".the-nest")[0]){
	  	$("#link_3little").css({color:"#153d53",fontWeight:"400"},100);
	 }
  	else{

    	$(".square.three").filter(':not(:animated)')
    	.animate({width:"270px"},{"queue": false, "duration": 200})
    	.animate({height:"170px"},{"queue": false, "duration": 200})
    	.animate({marginLeft:"0px"},{"queue": false, "duration": 200})
    	.animate({top:"160px"},200);
    	$("#link_3little").css({color:"#153d53",fontWeight:"400"},100);
    	$("#square_caption3").css('visibility','visible');
    	
 
    }
  });
  
 $(".square.three,#link_3little").mouseleave(function(){
 	if ($(".the-nest")[0]){
	 	$("#link_3little").css({color:"black",fontWeight:"300"},100);
	 }
	 else{
	 
	 
		 $(".square.three").filter(':not(:animated)').animate({height:$height_three,width:$width_three,top:"170px",marginLeft:"20px"},200);
		 $("#link_3little").css({color:"black",fontWeight:"300"},100);
		 $("#square_caption3").css('visibility','hidden');
	}
  });
the html:

Code:
<div class="square three" id="sq3" style="left-margin:20px;">
			<div id="square_caption3" class="square_captions">Three Little Birds</div>
			<div id="cf" style="overflow:hidden;height:100%;width:100%;"">
				<img class="bottom" style="width:100%;" src="images/the_nest_residences_3_color.jpg">
				<img class="top" style="width:100%;" src="images/the_nest_residences_3.jpg">
			</div>
		</div>