Crossfade

Crossfade plugin fix

HTML

<div id="logout-button">
    <img class="fade"
    src="http://www.w3schools.com/images/compatible_ie.gif"
    style="background: url('http://www.w3schools.com/images/compatible_firefox.gif');"/>
</div>

CSS

#logout-button {
    /* your css here */
}

#logout-button img.fade {
    cursor: pointer;
    /* insert your width, height properties here if needed */
}

#logout-button span.fake {
    /* your css here */
}

#logout-button span.fake img {
    position: absolute;
}

JavaScript

$.fn.crossfade = function(){
    return this.each(function(){ 
        var $$ = $(this);
        var bg = $$.css("backgroundImage");
        var target = $$.css('backgroundImage').replace(/^url|[\(\)]|['"]/g, '');
        
        $$.wrap('<span class="fake"> </span>').
            parent().
            prepend('<img>').
            find(':first-child').
            attr('src', target);
        
        $$.hover(function(){
            $$.stop().animate({opacity: 0}, 200);
        }, function(){
            $$.stop().animate({opacity: 1}, 500);
        }, 0);
    });
};

$(window).bind('load', function(){
    $("img.fade").crossfade();
});