Select everything APART from a certain element of ID in Jquery

I am trying to highlight a certain set of elements on a page by dimming everything else on the page. The below Div and all its child elements I would like to keep full opacity and the rest, I would li开发者_Python百科ke to dim to about 50%. This Div just sits in the main body of the page.

    <div id="basket">

    <div id="basket-contents">

        <div id="basket-messages">
        </div>


        <div id="basket-items">
        </div>

    </div>

</div>

I have tried the following in my JQuery, but it still dims the whole page, including this Div.

    // On hover basket start...
$("#basket").hover(
    function () {
        $('$:not(#basket)').animate({opacity: 0.5}, 1);
    },
    function () {
        $('$:not(#basket)').animate({opacity: 0.5}, 1);
    }
);

Can anyone point me in the right direction???

Thanks in advance.

If the opacity of all other elements in the page are changed and if the #basket div is inside any other element then this div will also get the opacity property inherited from the parent.

It would be better to place another div with page height and width and then put the stacking index of the #basket div to a higher value.

I'm not sure whether or not you'll need the wildcard * selector. Also, as intimated by Jamiec, drop the $ from your string:

$('*:not(#basket)').animate({opacity: 0.5}, 1);

Also, have you looked at some plugin code (e.g. BlockUI) that does this how it achieves the effect?

EDIT:

Does this have any effect:

$('*[id!=basket]').animate({opacity: 0.5}, 1);

I have tested this in the following way on a page of my own:

alert($("*").length);                //returns '78'
alert($("*[id!=FundTable]").length); //returns '77' 

So I know this works. Can you confirm this with your page?

Have you tried without the $ as part of your selector: ie,

$(':not(#basket)').animate({opacity: 0.5}, 1);