Question

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

如果我在点击功能中删除了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（）。

bugginess是一个不同的故事。我无法猜测为什么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

与fadeTo一起使用时，jQuery slideToggle表现不正常

2 个答案: