jQuery fade and change src

Question

I have and arrow png for my site, and I would like a different colored arrow to appear when hovering above the arrow. I know how to do that, but what I would like to know is if I can create a fade effect between the 2 arrows, even though i display the new arrow by changing the src of the original one.

Answer 1

Of course you can!

$("a.arrow").fadeOut(1000, function(){
   $(this).find("img").attr("src", "newurl");
   $(this).fadeIn(1000);
});

See Demo - Standard

See Demo - Images overlayed