jQuery image swap

[Cosizzle]

Hey guys,

 

Im a little stuck with a JQ script im trying to create.

 

First the html:

            <div id="image_holder">
                <img src="images/default.jpg" id="image_swap" />
            </div>
            
            <ul id="links" class="test">
                <li><a href="#" name="images/01.jpg">Wall-E 2</a></li>
                <li><a href="#" name="images/02.jpg">Joker 1</a></li>
                <li><a href="#" name="images/03.jpg">Joker 2</a></li>
            </ul>

 

What im trying to accomplish is:

 

1.) When the mouse enters #links I want it to create a bool staying true if it's in there false if it has left.

2.) if the mouse is:

2a) swap the current image loaded out with the new image to be loaded

else:

2b.)swap the current image loaded out with the default image.

 

I have several different attempts at this, this script below is a working attempt. But because im referencing the actual "a" attribute, whenever I goto hover on a new link, it will quickly show the default image...

 

jQ('#links li a').hover(
function() {
   		var img = jQ(this).attr("name");
	var parent = jQ(this).parent().parent().attr("id");

	jQ("#image_swap").fadeOut("medium", function() {
		// if mouse is within the #link id dont show default image
		if(parent === "links") {
			jQ(this).attr("src", img);
			jQ(this).fadeIn("medium");
		}
		// if the mouse is outside the #link id show the default image
	})

},
function() {
	jQ("#image_swap").attr("src", "images/default.jpg");
}
);

 

Also as a side note, before asking why im using the "name" attribute to store the URL of the image, it's because the href will be pointed to an actual page.