0

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

2 回答 2

0

将 user_box 更改为 user_bar:

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

});

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

于 2012-01-25T01:58:30.963 回答
0

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

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

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

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

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

于 2012-01-25T02:08:31.037 回答