jQuery slideToggle not behaving properly when used with fadeTo

Question

I would like to change the opacity of a div and then slide it up or down to view its contents but the sliding animation is behaving very strangely, as can be seen here:

http://jsfiddle.net/NsYtr/

If I remove the fadeTo in the click function however, the sliding works as it should.

What am I missing here to make the #user_box div change opacity and then slide?

markup:

  <div id="user_bar"></div>
  <div id="user_box">
      <a href="#">blah</a>
      <a href="#">blah</a>
      <a href="#">blah</a>          
  </div>

js:

$("#user_bar").hover(function(){
    $(this).fadeTo(100, 0.5);
}, function(){
    $(this).fadeTo(100, 0.7);
});

$("#user_bar").click(function(){
    $("#user_box").fadeTo(0, 0.5);
    $("#user_box").slideToggle();
});

css:

#user_bar {
  height: 10px;
  width:100%;
  position: fixed;
  top: 80px;    
  left: 0;
  right: 0;
  overflow:hidden;    
  cursor: pointer;
  background-color: #000;
}

#user_box {
  display:none;
  width: 100%;
  height: 50px;
  position: fixed;
  top: 90px;    
  left: 0;
  right: 0;
  overflow:hidden;    
  background-color: #000;
}

Answer 1

The sequencing is simple enough, you just need to call slideToggle() in the callback for fadeTo().

The bugginess is a different story. I can't guess why fadeTo() mucks up slideToggle() and makes it always close rather than open.

However, I was able to circumvent it by using animate() directly:

$("#user_bar").click(function(){
    $("#user_box").animate({opacity: .5}, {
        duration: 100,
        complete: function() { $('#user_box').slideToggle(); }
    });
});

Here is an update to your fiddle demonstrating this

Answer 2

change user_box to user_bar:

$("#user_bar").click(function(){
    $("#user_bar").fadeTo(0, 0.5);
    $("#user_box").slideToggle();

});

EDIT: or better yet, change it to $(this)