jQuery: mouseOver breaks each() loop

[madmatter23]

Ok, here's the issue...

I have a function that does 2 things. Each one works independently of the other, but they don't work together.

First, the function grabs "rel" from ".thumb_li" and appends an img to #mids using its value.

Then, it sets a rollover effect so that when you hover over ".thumb_li" it makes visible the linked img in #mids.

so here's the code:

function thumb_to_mid(target_items, name){
	 $(target_items).each(function(i){
		$("#mids").append("<img class='"+name+"' id='"+name+i+"' src='"+$(this).attr('rel')+"' alt='mid-sized image' />"); //add mid image to #mids
		var my_mid_image = $("#"+name+i); //currently selected mid_image #id for this loop cycle
		
		if($(this).attr("rel") != "" && $(this).attr("rel") != "undefined" ){ //check to make sure rel isn't blank, then:	
			$(this).hover( function(){
					$("."+name).animate({"opacity" :"0"}, 100); //fade out previous mid pic
					$("."+name).css({"display" :"none"}); //hid previous mid pic
					my_mid_image.css({"display" :"block"}); //show current mid pic
					my_mid_image.animate({"opacity" :"1"}, 500); //fade in current mid pic
			});
		}
	});
}

So here's the problem. Adding the $(this).hover() command stops $(target_items).each() from applying to each target_item! It makes the loop stop after one pass.

If I remove $(this).hover(), poof! The loop works again. But $(this).hover() does at least work for the one img that it allows to be appended!

I can't figure out why $(this).hover() breaks the $(target_items).each() loop from finishing. Can anyone please help?

Much appreciated!

[bgallegos]

I'm having a hard time visualizing what you are actually trying to do. Can you put up your html?