Jquery Issue

[starlight849]

I'm having some trouble with the site I'm developing.

Here is the link: http://www.r2maker.com/r2maker/index2.html

As you can see the fourth image is really buggy and I'm unsure of how to fix it.

Here is the code for that one area only.

Here is my css

#content{
	width: 922px;
	height: 372px;
	overflow:hidden;

}


#pic1{	
	/* width of space */
	width: 130px;
	height: 370px;
	overflow:hidden;
	float:left;
	border-style:solid;
	border-color: #3e4b5a;
	border-top-width:1px;
	border-right-width:1px;
	border-bottom-width:1px;
	border-left-width:1px;
	
}

#pic2{
	/* width of space */
	width: 130px;
	height: 370px;
	overflow:hidden;
	float:left;
	border-style:solid;
	border-color: #3e4b5a;
	border-top-width:1px;
	border-right-width:1px;
	border-bottom-width:1px;
	border-left-width:1px;
}
#pic3
{
	width: 508px;
	height: 370px;
	overflow:hidden;
	float:left;
	border-style:solid;
	border-color: #3e4b5a;
	border-top-width:1px;
	border-right-width:1px;
	border-bottom-width:1px;
	border-left-width:1px;
}
#pic4
{
	width: 130px;
	height: 370px;
	overflow:visible;
	float: right;
	border-style:solid;
	border-color: #3e4b5a;
	border-top-width:1px;
	border-right-width:1px;
	border-bottom-width:1px;
	border-left-width:1px;
}
#picSp1
{
	height:370px;
	overflow:hidden;
	width:5px;
	float:left;
	
}
#picSp2
{
	overflow:hidden;
	height:370px;
	width:5px;
	float:left;
}
#picSp3
{
	overflow: hidden;
	height:370px;
	width:5px;
	float:left;
}
#picSp4
{
	overflow: hidden;
	height:370px;
	width:1px;
	float:left;
}
#menu1{
	/* This is the container for the thumbnails */
	height:45px;
	float: none;
	width: 400px;
}

and my index.html

 <div id="content">
	<script type="text/javascript">
	function upSize(){
	
	$("#pic1").animate(      
	       {"width": "508px"},          
	             {duration: 500, queue: false}); 
	
	$("#pic2").animate(      
	       {"width": "130px"},          
	            {duration: 500, queue: false});
	          
	 $("#pic3").animate(      
	       {"width": "130px"},          
	             {duration: 500, queue: false});
	 $("#pic4").animate(      
	       {"width": "130px"},          
	             {duration: 500, queue: false});
	}
	function downSize(){
	$("#pic1").animate(      
	       {"width": "130px"},          
	             {duration: 500,queue: false});
	
	$("#pic2").animate(      
	       {"width": "508px"},          
	            {duration: 500,queue: false});
	          
	$("#pic3").animate(      
	       {"width": "130px"},          
	            {duration: 500,queue: false});
     $("#pic4").animate(      
	       {"width": "130px"},          
	             {duration: 500, queue: false});
	}
	function ThirdSize(){
	$("#pic1").animate(      
	       {"width": "130px"},          
	           {duration: 500, queue: false});
	
	$("#pic2").animate(      
	       {"width": "130px"},          
	            {duration: 500,queue: false});

	          
	$("#pic3").animate(      
	       {"width": "508px"},          
	           {duration: 500,queue: false});
	
	 $("#pic4").animate(      
	       {"width": "130px"},          
	             {duration: 500, queue: false});
	}
		
	function FourthSize(){
			
	$("#pic1").animate(      
	       {"width": "130px"},          
	           {duration: 500, queue: false});
	
	$("#pic2").animate(      
	       {"width": "130px"},          
	            {duration: 500,queue: false});

	          
	$("#pic3").animate(      
	       {"width": "130px"},          
	           {duration: 500,queue: false});
	
	 $("#pic4").animate(      
	       {"width": "508px"},          
	             {duration: 500, specialEasing:{width: "linear"}, queue: false});
				
	}
	</script>
	

	<div id="pic1">
		<img src="img/c_left.jpg" height="370" width="508" alt=""  onmouseover="upSize();"  />
		<!-- <img src="img/pic1.jpg" width="720" height="400" alt="" /> -->
	 </div>
	 
	<div id="picSp1">
	</div>

	
	<div id="pic2">
		<img src="img/c_right.jpg" height="370" width="508" alt=""  onmouseover="downSize();"  />
		<!--<img src="img/pic2.jpg" width="720" height="400" alt="" /> -->
	</div>
 
	<div id="picSp2">	
	</div>

	<div id="pic3">
	<img src="img/c_center.jpg" height="370" width="508" alt=""  onmouseover="ThirdSize();" />
    <!--<img src="img/pic2.jpg" width="720" height="400" alt="" /> -->
	</div>
 
	<div id="picSp3">
	</div>
	
	<div id="pic4">
	<img src="img/c_4.jpg" height="370" width="508" alt=""  onmouseover="FourthSize();" />
	</div>
	<div id="picSp4"></div>
	</div>

[Dormilich]

I don’t see anything buggy with that image (the dome one).

[starlight849]

When you hover over the first image on the left and switch back and forth between it and the last image the divs bounce a little and I see that dome picture cut in and out . I'm testing on google chrome and iphone with iOS 6

[starlight849]

Now I have removed the bounce of the div.. However that fourth image is still blinking when switching back between it and the first image.