jQuery in a loop

[maxelcat]

Hi

I am doing some simple jQuery work and I have a little problem.

There are some image panels. If you roll over them a little div animates in. This new div sits on top of the image, and is about 1/4 of the size of the triggering image.

Its triggered by mouseover and mouseout (although I have tried hover - can't use click)

It works excpet if you trigger the animation from where the NEW div will be then it goes into a loop - I guess that its triggering mouse out for me...

How can I stop this please

You can see www.ypfservice.net

here's my jQuery

$(document).ready(function() {			  
			  var numberLinks = $('a.panelImage').length;
			  
			  for (var j=0; j<numberLinks; j++){
				var currentLink = $('a.panelImage:eq('+j+')'); 				 
				$('<div class="fred"></div>').insertAfter(currentLink);
				
				var gtr=currentLink.position().left;
				 $(currentLink).next().css({ // ie div.fred
										'position':'absolute',						'top':'100px',
	'left':gtr+'px',
	'display':'none',
	'width':'5px',
	'height':'5px',
	'overflow':'hidden',
	'background-image':'url(http://www.ypfservice.net/templates/ypftemplate/images/foyerPreview.jpg'
											});
								
			  }
			  
			  
			  $('a.panelImage img')
			  .mouseover(function(){
			$(this).parent().next().stop().animate({
			height:'138px',
			width:'184px'
			}, 500)			   
			}// end function
			) //end mouseover
			 .mouseout(function(){
			$(this).parent().next().stop().animate ({
			'width':'0px',
			'height':'0px'
			},500);
			}	//end function
			 );	//end function
			  
	  });