-- JS --
$(".trigger2").hover(function (){
var hoverClass = $(this).attr('id');
$(".trigger2").removeClass('active');
$(this).addClass('active');
//slideDown the background element after updating its class to change the bg image
$("#background").removeClass().addClass(hoverClass).slideDown(500);
},
function (){
//notice you need to get the ID again since the last time was in a different scope not accessible from here
var hoverClass = $(this).attr('id');
//start by sliding Up the element
$("#background").slideUp(500, function () {
$(this).removeClass().addClass(hoverClass)
});
});
-- CSS --
/*Notice I added "display:none", this will allow slideDown to function properly the first time its called*/
#background {
display:none;
height: 200px;
width: 400px;
background-image: none;
position: absolute;
top:0;
left:200px;
}
Here's a fiddle: http://jsfiddle.net/yvsK4/2/
Also if you want to use a fade animation you should be able to replace slideDown
/slideUp
with fadeIn
/fadeOut
.