jQuery slideToggle not behaving properly when used with fadeTo
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;
    }


jQuery slideToggle not behaving properly when used with fadeTo
===

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;
    }

