Try using a transition
#logo{
transition: background-image 2s;
-moz-transition: background-image 2s;
-webkit-transition: background-image 2s;
}
Demo: Fiddle
Since background-image transition is supported only in Chrome for now, try fadeOut()
<div id="logo" class="top" />
then
#logo {
width:256px;
height:256px;
background-image: url('https://pbs.twimg.com/profile_images/3588564988/ca2ec46372bf01eff59044dd0046132c.jpeg');
}
#logo.over {
background-image: url('http://icons.iconarchive.com/icons/gcds/chinese-new-year/256/orange-icon.png');
}
and
$(document).ready(function () {
$('#logo').hover(function () {
$(this).stop(true, false).fadeTo(500, .1, function () {
$(this).addClass('over').fadeTo(500, 1)
})
}, function () {
$(this).stop(true, false).fadeTo(500, .1, function () {
$(this).removeClass('over').fadeTo(500, 1)
})
});
});
Demo: Fiddle