I have managed to create a menu where the photo changes when hovering over a menu list item. However, I am struggling to add a fade in/out effect for a smooth transition between the photos.
Here is the code:
<div id="menu">
<img src="menu1.jpg" alt="">
<ul>
<li><a data-image="menu1.jpg" href="#">Item 1</a></li>
<li><a data-image="menu2.jpg" href="#">Another item</a></li>
<li><a data-image="menu3.jpg" href="#">One more item</a></li>
</ul>
</div>
<!-- /#menu -->
<script>
var image = $('#menu').find('img').attr('src');
$('#menu ul li a').mouseover(function() {
var currentImage = $(this).attr('data-image');
$(this).parent().parent().parent().find('img').attr('src', currentImage);
});
</script>
I attempted to include a fade in/out effect like this but it did not work as expected:
$('#menu ul li a').mouseover(function() {
$(this).parent().parent().parent().find('img').hide().attr('src', currentImage).fadeIn(2000);
}, function () {
$(this).parent().parent().parent().find('img').fadeOut(2000,function(){
$(this).parent().parent().parent().attr('src', currentImage).fadeIn();
});
});