jQuery slideToggle 与fadeTo 一起使用时行为不正确答案

【问题标题】：jQuery slideToggle not behaving properly when used with fadeTojQuery slideToggle 与fadeTo 一起使用时行为不正确
【发布时间】：2012-01-25 10:08:31
【问题描述】：

我想更改 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;
}

【问题讨论】：

标签： jquery slidetoggle fadeto

【解决方案1】：

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

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

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

$("#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

【讨论】：

谢谢。如果你愿意的话，我强烈怀疑你也可以走相反的方向。 IE。直接使用slideUp/slideDown，而不是slideToggle。

【解决方案2】：

将 user_box 更改为 user_bar：

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

});

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

【讨论】：

感谢您的快速回复！这确实解决了滑动问题，但我想在滑动之前更改 #user_box 的不透明度