Can anyone recommend a really nice tutorial on how to create a menu with cross-fade image transition with 2 separate images (instead of using sprite images-- seems to be messing up the flow when I try that)? The following is functional, but all the initial images are overlapping and stuck on top of one another. I can't get the initial (not bkgrd) images to position correctly without breaking functionality (tried adding in... top:?px left: ?px to each of the fade1, fade2, fade3 classes). Here's the original script that I implemented (from Jquery for designers site). I'm still quite the newb...

<script type="text/javascript">
<!--
$(function () {
$('img.fade').each(function () {
var $$ = $(this);

var target = $$.css('background-image').replace(/^url|[\)\(]/g,'');

$$.wrap('span style="position: relative;"></span>')
.parent() // span elements
.prepend('<img>')
.find('img:first') //selector now new image
.attr('src', target);

$$.css({
'position' : 'absolute',
'left' : 0,
'top' : this.offsetTop
});

$$.hover(function () {
$$.stop().animate({
opacity: 0
}, 250);
}, function () {
$$.stop().animate({
opacity: 1
}, 3000);
});
});
});
--></script>

and HTML...

<div id="artmenu">

<div class="fademenu">
<a href="#sitelink"><img class="fade1" src="images/menu_sitea.png" border="0" style="background-image: url(images/menu_siteb.png)" border="0"/></a>
<a href="#printlink"><img class="fade2" src="images/menu_printa.png" border="0" style="background-image: url(images/menu_printb.png)" border="0" /></a>
<a href="#illustlink"><img class="fade3" src="images/menu_illa.png" border="0" style="background-image: url(images/menu_illb.png)" border="0" /></a>
</div>

</div>

CSS:
.fade1 {
left: 21px;
top: 3px;}
.fade2 {
left: 290px;
top: 2px;}
.fade3 {
left: 525px;
top: 2px;}

Try this method:

javascript code:
(you'll also need to get download the most recent verson of the jquery.js file from jquery.com). Place this in a separate javascript file:
jQuery(document).ready(function(){
//Fade Effect
jQuery(".fade span").css("opacity","0");
jQuery(".fade span").hover(
function () {
jQuery(this).stop().animate({
opacity: 1
}, "slow");
},
function () {
jQuery(this).stop().animate({
opacity: 0
}, "slow");
}
);
}); // the closing bracket to the document ready function

css code:
.fade1Btn {
cursor: pointer;
background: url(../images/menu_sitea.png) 0 0px no-repeat;
height:26px; /*adjust this to the width and height of your image*/
width:118px; /*adjust this to the width and height of your image*/
}

.fade1Btn span {
display:block;
text-indent:-99em;
width:118px; /*adjust this to the width and height of your image*/
height:26px; /*adjust this to the width and height of your image*/
background: url(../images/menu_siteb.png) 0 0px no-repeat;
/* You could also use image sprites and change the background position
background: url(../images/menu_sitea.png) 0 -26px no-repeat;*/
cursor: pointer;

}

HTML Code:
<a href="#" class="fade1Btn fade clearfix"><span></span></a>

please try below tutorial it seems helpful

http://www.lastbeatniks.tk/free-image-cross-fade/

Thanks, Puddle!

It's working beautifully!!!! I can't tell you how much I appreciate the help. Seems much more lightweight than the other code I'd tried as well.