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');
});