How can I fade out a class or background-image?

Question

I'm playing with jQuery, and I want to fade out the logo. So basically, I want to have the animation fade out the logo first and then slowly shrink the header, so I can only see the id="nav" div. I tried using slideToggle, but it seems to just make my header div layer disappear rather than shrinking it to the header collapse.

<div id="header"><div id="nav"></div></div>
#header {
    height: 25px;
    margin:0;
    padding:85px 0 0 5px;
    background-image: url("images/logo.png");
    background-repeat: no-repeat;
}

#header-collapse {
    padding: 5px 0 0 5px;
    height: 25px;
    margin: 0;
}

<script>
$("#viewmode").click(function(){ 
    $("#viewmode").click(function(){ 
$("#header").attr("id", "header-collapse");
});

</script>

Update: I am testing this:

$("#header").fadeTo(1000,0).css("background-image", "none");

But this fades the header div which contains the nav div, and I only want to fade the logo. How can I select the headers background-image?

Update: I used this for a link. How can I make click and go back to the original?

<a href="#" id="viewmode">View Mode</a> <br /> 
<script> 
$("#viewmode").click(function(){ 
    $("#logo").fadeTo(1000,0);
    $("#logo").animate({'height':'0'},'fast');

});
</script>

Answer 1

try

$("#header").fadeTo(1000,0).attr('id','header-collapse')

Or

$("#header").fadeTo(1000,0,function(){$(this).attr('id','header-collapse');});

fadeTo supports a callback function once the animation is complete.

As someone has already mentioned, changing IDs is not required for animating an element.

I missed out the shrinking of the header part, and the fact that you only wanted the background image (logo) to fade.

I would use two elements, one the #header and another called #logo. The background image would be part of the #logo element and #logo would be absolutely positioned within #header. (use the css z-index property to make it appear behind or front).

Then you could use the callback and animate the header once the fade is complete. No need to use classes for the start and end states.

callback refers to a function that is fired at the end of an animation.

see below:

$("#logo").fadeTo(1000,0,function(){
    $(#header).animate({'paddingTop':'5px'},'fast');
});

Answer 2

Firstly, don't change an element's id. It is pretty much never necessary, can break all kinds of things, and is inefficient. Add or remove classes instead.

You can animate the transition between classes using the jQuery UI function switchClass:

$('#header').switchClass('header-full','header-collapse','slow');

NB

1. You need to make the CSS refer to a header-collapse class rather than ID
2. You need to install jQuery UI for this to work.

Answer 3

<style>
#header {
    height: 25px;
    margin:0;
    width:[logo image width in px];
    padding: 5px 0 0 5px; /* no need to put space for logo now in padding!*/
    background-image: url("images/logo.png");
    background-repeat: no-repeat;
}
</style>

<script>
$('#viewmode').click(function() {

  $('#header').fadeOut('slow', function() { 
  /*you can still use fadeTo(1000,0,function(){*/

    // Animation complete.
  });

});
</script>

make it look the way it does with the following: you didn't give the nav css so I can't do it for you:

<div class='header_wrapper'>
   <div id="header"></div>
   <div id="nav"></div>
</div>