jquery - jQuery slideToggle 与fadeTo 一起使用时行为不正确

Question

我想更改 div 的不透明度，然后将其向上或向下滑动以查看其内容，但滑动动画的行为非常奇怪，如下所示：

http://jsfiddle.net/NsYtr/

但是，如果我在 click 函数中删除了 fadeTo，则滑动会正常工作。

我在这里缺少什么来使#user_box div 更改不透明度然后滑动？

标记：

  <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

将 user_box 更改为 user_bar：

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

});

编辑：或者更好的是，将其更改为 $(this)

Answer 2

排序很简单，您只需要在fadeTo() 的回调中调用slideToggle()。

越野车是另一回事。我猜不出为什么 fadeTo() 搞砸了 slideToggle() 并让它总是关闭而不是打开。

但是，我可以通过直接使用 animate() 来规避它：

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

这是您的小提琴的更新，展示了这一点