0

div の不透明度を変更し、上下にスライドしてその内容を表示したいのですが、スライド アニメーションは次のように非常に奇妙な動作をしています。

http://jsfiddle.net/NsYtr/

ただし、クリック機能の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 に答える