Question

I have 2 #header elements with different info in each that I want to fade in/out on a hover event.

I can do the fade in/out no problem BUT I really want the elements to be hidden, i.e. using “display:none;” AFTER they have faded out and THEN bring them back once they fade in.

I have this already for the fade:

$(document).ready(function()
{ 

  $("#header").hover
   (function()
   {
    $(this).fadeTo("fast", 0);
     $('#header_hover').fadeTo("fast", 1.0);    
   },
   function()
   {
    $(this).fadeTo("fast", 1.0); 
     $('#header_hover').fadeTo("fast", 0); '5'});      

   });

 });

Which works great but although this changes the ‘opacity’ of each item they still exist together in code, so its as if I have 2 headers which I don’t want.

FYI I’m using this CSS to show one header behind the other:

    #header, #header_hover
{
 height:260px;
 padding:0;
 margin:20px 10px;
 position:absolute;
 top:20px;
}

#header
{
 background:red;
 z-index:10;
}
#header_hover
{
 background:blue; 
 z-index:5;
}

I’ve tried a number of different solutions in jQuery, nothing has worked. At worst I get a crazy look at best one shows but the other is hidden forever?

Answer 1

You just have to show #header_hover before fading in (normally), and hide #header after fading out (using a callback).

$("#header").hover(function() {
    $(this).fadeTo("fast", 0);
    $('#header_hover').show();
    $('#header_hover').fadeTo("fast", 1.0);    
}, function() {
    $(this).fadeTo("fast", 1.0);
    $('#header_hover').fadeTo("fast", 0, function() {
        $(this).hide();
    });               
});

Try it here (Note: The red div has less content, so you can see the effect.).