Change background of a div with a slideDown effect when hovering over a link

Question

I am using jquery to change the background of a transparent div when hovering over links in other div (here is the Jsfiddle) . Here is the code:

$(".trigger2").hover(function (){
    var hoverClass = $(this).attr('id');
    $(".trigger2").removeClass('active');
    $(this).addClass('active');
    $("#background").removeClass().addClass(hoverClass);
 },
 function (){  
     $("#background").removeClass().addClass(hoverClass);
 });

I want the background-image to change with a slide down effect. I tried to attach .slideDown() to different parts of my code but nothing happens.

How should I implement .slideDown() to get the deisred effect, and is it even possible?

Answer 1

-- 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.

Answer 2

I don't know of any way to do what you want without using rotating images (rather than css backgrounds), but the JQuery color plugin might be of some use to you.

Look at the examples here (click on Demo), and a tutorial here.

Answer 3

The .slideDown() function shows the div after it has already been hidden. http://api.jquery.com/slideDown/ The slideUp function might be what you're looking for in hiding the div. If you would like to change the image with a slideUp effect, what you can do is put two divs over each other and do a slideUp on the one to be hidden.

I have updated the fiddle to illustrate this: http://jsfiddle.net/yvsK4/1/