1

メニューdivを表示/非表示にするために使用したいボタンがあります。トグルも考えたのですが、divの表示を対象にしているため、メニューを切り替えるボタンが隠れてしまいます。そして、私はボタンを動かしたくありません。

アニメーションはクリックで正常に動作しますが、上下に切り替える方法が見つかりません。私は .stop() コマンドを追加しようとしましたが、それはすべてを殺します...これはこれまでの私のコードです:

$('.closebutton').click(function () {
        $('#settings').stop().animate({top: '-170px'});
});

$('.closebutton').click(function() {
        $('#settings').stop().animate({top: '0px'});
});

HTML:

 <div id="settings">
      <div class="closebutton"></div>
 </div>

そして、ここに CSS があります。

 #settings {
position: absolute;
width: 100%;
height: 200px;
top: 0;
left: 0;
background: #202e3c;
z-index: 9999;
box-shadow: 0px 5px 5px rgba(0,0,0,.5)
 }

 .closebutton {
position: absolute;
cursor: pointer;
bottom: 5px;
right: 5px;
width: 25px;
height: 25px;
background: url(../images/gear.png);
background-size: cover;
 }
4

1 に答える 1

0

LIVE DEMO

var t = 0; // Toggler

$('.closebutton').click(function ( e ) {

  t = ++t % 2;  // t= 1, 0, 1, 0, 1, 0......
  $('#settings').stop().animate({ top: t? -200 : 0 }); // #settings
  $(e.target).stop().animate({ bottom: t? -30 : 5  }); // This button

});

愚かなトグルなしで:

LIVE DEMO

$('.closebutton').click(function ( e ) {

  var p = !$('#settings').position().top; // 0 = false else true (boolean trick)
  $('#settings').stop().animate({ top: p? -200 : 0 });
  $(e.target).stop().animate({ bottom: p? -30 : 5  });

});
于 2013-06-26T00:59:16.957 に答える