how to fade div bg image and all children but one using jquery
<p>I am trying to fade the background of a containing div and all the children except for one. I can either fade the whole thing or fade just the children but I can't figure out how to select the all children but one and also the div itself. I've got everything except for the background image to fade. Here is my jquery: </p>

<pre><code>$("#fadeBox &gt; *:not('#faderNav')").fadeOut("slow", function () {
    $('#fadeBoxContainerLink').attr('href', urls[newState]);
    $('#fadeBox').css('backgroundImage', 'url('+images[newState]+')');
    $('#fadeBox&gt;h2').text(headings[newState]);
    $('#fadeBox').data('faderState', newState);
    $('#faderLink'+newState+'&gt;img').css('borderColor', '#A9112C');
    $('#faderLink'+initialState+'&gt;img').css('borderColor', '#42454F');
});
</code></pre>

<p>and here is the html: </p>

<pre><code>    &lt;a id="fadeBoxContainerLink" href="#"&gt;
        &lt;div id="fadeBox" class="frontPageBox"&gt;
            &lt;h2&gt;
            &lt;/h2&gt;
            &lt;ul id="faderNav"&gt;
            &lt;li&gt;
                &lt;a href="#" id="faderLink0" class="faderLink"&gt;&lt;img src="img/baseball_link.jpg" alt="Baseball Trophies" /&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href="#" id="faderLink1" class="faderLink"&gt;&lt;img src="img/football_link.jpg" alt="Football Trophies" /&gt;&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                        &lt;a href="#" id="faderLink2" class="faderLink"&gt;&lt;img src="img/soccer_link.jpg" alt="Soccer Trophies" /&gt;&lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/a&gt;
</code></pre>
