Hello,
I have a set of 18 DIV's and when you mousein one of them the others fade out, then when you fade mouseout they are all suppose to fade back in. All of the links do, but my divider DIV does not fade back in.

I don't want to add it to the class .footerlink, because I just want it to fade out and fade in with the rest but when you roll over the #divider div nothing will happen.

Can you help me figure out why when you mouseout the #divider DIV stays faded out?
DEMO

jQuery:

1. $(function() {           
    $("#footer .footerlink").hover(function () {             
       $(this).siblings().stop().animate({opacity: 0.3}, "slow");}, function () {      
              $("#footer .footerlink").stop().animate({opacity: 1.0}, "slow");       
         });   
   });
   
   
   
   
   

CSS:

1. #footer {
       position: relative;
       z-index: 3;
       width: 548px;
       height: 109px;
       margin: 0 auto;
       text-align: center;
   }
   
   #divider {
       width: 12px;
       height: 13px;
       float: left;
       background-image: url(../images/divider.png);
       background-repeat: no-repeat;
       background-position: center;
   }
   
   .footerlink {
       width: auto;
       height: 13px;
       float: left;
       cursor: pointer;
       text-indent: -9999px;
       display: block;
   }
   
   .footerlink#facebook {
       width: 68px;
       height: 13px;
       background-image: url(../images/facebook.png);
       background-position: center;
       background-repeat: no-repeat;
   }
   
   .footerlink#twitter {
       width: 48px;
       height: 13px;
       background-image: url(../images/twitter.png);
       background-position: center;
       background-repeat: no-repeat;
   }
   
   .footerlink#myspace {
       width: 57px;
       height: 13px;
       background-image: url(../images/myspace.png);
       background-position: center;
       background-repeat: no-repeat;
   }
   
   .footerlink#stumbleupon {
       width: 88px;
       height: 13px;
       background-image: url(../images/stumbleupon.png);
       background-position: center;
       background-repeat: no-repeat;
   }
   
   .footerlink#google {
       width: 55px;
       height: 13px;
       background-image: url(../images/google.png);
       background-position: center;
       background-repeat: no-repeat;
   }
   
   .footerlink#youtube {
       width: 56px;
       height: 13px;
       background-image: url(../images/youtube.png);
       background-position: center;
       background-repeat: no-repeat;
   }
   
   .footerlink#vimeo {
       width: 40px;
       height: 13px;
       background-image: url(../images/vimeo.png);
       background-position: center;
       background-repeat: no-repeat;
   }
   
   .footerlink#psp {
       width: 20px;
       height: 13px;
       background-image:url(../images/psp.png);
       background-position: center;
       background-repeat: no-repeat;
   }
   
   .footerlink#rss {
       width: 20px;
       height: 13px;
       background-image: url(../images/rss.png);
       background-position: center;
       background-repeat: no-repeat;
   }
   
   .footerlink#legal {
       width: 548px;
       height: 16px;
       background-image: url(../images/legal.png);
       background-position: center;
       background-repeat: no-repeat;
   }
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

HTML:

1.                 <div id="footer">
                       <div class="footerlink" id="facebook" onclick="location.href='#';">Facebook</div>
                       <div id="divider"></div>
                       <div class="footerlink" id="twitter" onclick="location.href='#';">Twitter</div>
                       <div id="divider"></div>
                       <div class="footerlink" id="myspace" onclick="location.href='#';">Myspace</div>
                       <div id="divider"></div>
                       <div class="footerlink" id="stumbleupon" onclick="location.href='#';">StumbleUpon</div>
                       <div id="divider"></div>
                       <div class="footerlink" id="google" onclick="location.href='#';">Google</div>
                       <div id="divider"></div>
                       <div class="footerlink" id="youtube" onclick="location.href='#';">YouTube</div>
                       <div id="divider"></div>
                       <div class="footerlink" id="vimeo" onclick="location.href='#';">Vimeo</div>
                       <div id="divider"></div>
                       <div class="footerlink" id="psp" onclick="location.href='#';">PSP</div>
                       <div id="divider"></div>
                       <div class="footerlink" id="rss" onclick="location.href='#';">RSS</div>
                       <div class="footerlink" id="legal" onclick="location.href='#';">©2009-2010 JoblessPunkDESIGNS.com All Rights Reserved.</div>
                      </div>