Fade All DIV's Besides DIV Hovering Over

Fade All DIV's Besides DIV Hovering Over

hello,
What I have is a set of 6 DIV's inline that are set at 100% opacity. When you hover over one of the six DIV's the other five DIV's fade to 50% opacity. Then when you fnOut the opacity of the all the DIV's go back up to 100%.

I've almost got it, but I need a little more knowledge about the jQuery selectors and filters. What I have right now, (I know it's not what I want), is I set the :not(#DIV ID NAME). What I really want to do is tell jQuery :not(THE DIV THAT IS MOUSEOVER).

If you could help me out that would be awesome. I'm still learning and taking crash courses threw lynda.com and other PDF books trying to get this under my belt.

Here is the jQuery I'm using:
  1.     $(function() {
            $("div#header .toolbar").css("opacity","1.0");
            $("div#header .toolbar").hover(function () {
            $("div#header .toolbar:not(#Home)").stop().animate({opacity: 0.5}, "slow");
        },
            
        function () {
            $("div#header .toolbar").stop().animate({opacity: 1.0}, "slow");
            });
        });










Here is the CSS:
  1. body {
        margin: 0 auto;
        padding: 0;
        width: auto;
        height: auto;
        text-align: center;
    }

    #container {
        width: 900px;
        height: auto;
        margin: 0 auto;
        background-color: #0FC;
    }

    #header {
        width: 840px;
        _width: 855px;
        height: 150px;
        margin: 0 auto;
        background-color: #0F0;
        text-align: center;
    }

    .toolbar {
        width: 100px;
        height: 140px;
        float: left;
        margin-left: 15px;
        margin-right: 15px;
        background-color: #00F;
        border-style: solid;
        border-width: 5px;
        border-color: #F00;
        font-size: 24px;
        font-weight: bold;
        color: #FFF;
    }





































Here is the HTML:
  1. <body>

    <div id="container">
    <div id="header" class="header">
    <div class="toolbar" id="Home">Home</div>
    <div class="toolbar" id="About">About</div>
    <div class="toolbar" id="Web">Web</div>
    <div class="toolbar" id="Print">Print</div>
    <div class="toolbar" id="Blog">Blog</div>
    <div class="toolbar" id="Contact">Contact</div>
    </div>
    </div>

    </body>












Here is a the DEMO:
http://www.joblesspunkdesigns.com/comp/header/header.html [UPDATED working]

I have the Demo cross browsed 100%
IE 6-8, Firefox, Safari, Chrome, Opera, iPhone.

Thank you for your time,
I'm trying really hard to understand jQuery but somethings come from experiance with jQuery, witch I don't have.

Thanks,
Tim