Q:

Changing background image, fades out old image twice then fades in new one

I have the following code:
$('.active-bean-bag ul li').hover(function() { 
    var activeBeanBag = 'menu-' + $(this).attr("class");
    $('.active-bean-bag img.menu-image').fadeOut();
    $('.active-bean-bag img.menu-image').fadeIn(function(){
            $('.active-bean-bag img.menu-image').attr("src", '/images/'+activeBeanBag+'.png');
    });
});

However when I hover over a different LI it looks like it fades out twice on the old images so out and in and then out a gain then fades into the new image? Any ideas why?
UPDATED:
$('.active-bean-bag ul li').mouseover(function() { 
    var activeBeanBag = 'menu-' + $(this).attr("class");
    var newImage = '/skins/temaplate/customer/images/'+activeBeanBag+'.png';
    var $img = $('.active-bean-bag img.menu-image');
    if ($img.attr('src') != newImage) {
        $img.fadeOut(function() {
            $(this).attr("src", newImage).fadeIn();
        });
    }
});​

ALSO TRIED WITH SAME RESULT:
$(".active-bean-bag ul li").hover(function(e) {
    e.preventDefault();
        var activeBeanBag = 'menu-' + $(this).attr("class");
    $('.active-bean-bag img.menu-image').fadeOut(400, function() {
                $('.active-bean-bag img.menu-image').attr('src','/skins/template/customer/images/'+activeBeanBag+'.png');
        }).fadeIn(400);
});

A:

The call to fadeIn() and fadeOut() are running simultaneously, fighting over the opacity. 
Instead, chain your fadeIn() call to the callback of fadeOut():
$('.active-bean-bag ul li').hover(function() { 
var activeBeanBag = 'basn0g' + $(this).attr("class");
$('.active-bean-bag img.menu-image').fadeOut(function(){
    $('.active-bean-bag img.menu-image').attr("src", 'http://www.schaik.com/pngsuite/'+activeBeanBag+'.png');
    $('.active-bean-bag img.menu-image').fadeIn();
});

});​
as in this jsfiddle: http://jsfiddle.net/XPthr/5/ . (I also changed the src assignment to before the fadeIn() so that it fades in with the new image visible. 

