How can I fade out a class or background-image?
<p>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 <code>id="nav"</code> div. I tried using slideToggle, but it seems to just make my header div layer disappear rather than shrinking it to the header collapse.</p>

<pre><code>&lt;div id="header"&gt;&lt;div id="nav"&gt;&lt;/div&gt;&lt;/div&gt;
#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;
}

&lt;script&gt;
$("#viewmode").click(function(){ 
    $("#viewmode").click(function(){ 
$("#header").attr("id", "header-collapse");
});

&lt;/script&gt;
</code></pre>

<p><strong>Update:</strong>
I am testing this: </p>

<pre><code>$("#header").fadeTo(1000,0).css("background-image", "none");
</code></pre>

<p>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 <code>background-image</code>?</p>

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

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

});
&lt;/script&gt;
</code></pre>
