jquery - Jqueryはdivをアニメーション化し、関数を返します

Question

メニューバーをクリックすると、上から下に向かってdivが表示されます。ボタンのリンクをもう一度クリックすると、一番上に戻る関数を作成する必要があります。これは私がこれまでに試したことです：

HTML：

<div id="wrapper"><button id="top">&raquo;</button></div>
<div class="block"></div>

Javascript：

$("#top").click(function(){
  $(".block").animate({"top": "+=300px"}, "slow");
});

CSS：

div {
  position:absolute;
  background-color:#abc;
  left:50px;
  width:90px;
  height:90px;
  margin-top:5px;
}

#wrapper {

    top: 80px;
 }  


.block {
     margin-top:-95px;
  }   
​

ライブデモ

Answer 1

jqueryのtoggle（）を使用してみてください。コードは次のようになります。

$("#top").toggle(function(){
    $(".block").animate({"top": "+=300px"}, "slow");
}, function() {
    $(".block").animate({"top": "-=300px"}, "slow");
});

ライブデモ

トグル（）は非推奨になっているようですので、クリックを使用する別の解決策を次に示します。

$("#top").on("click", function(){
    if(!$(".block").hasClass('down'))
        $(".block").addClass('down').animate({"top": "+=300px"}, "slow");
    else
        $(".block").animate({"top": "-=300px"}, "slow").removeClass('down');
});

ライブデモ

Answer 2

$("#top").on('click', function(){
    var elm = $(".block");
    elm.animate({"top": ((parseInt(elm.css('top'), 10)>10?"-=":"+=")+"300px")}, "slow");
});​

フィドル

Answer 3

こんにちは、このように行うことができます。diffを割り当てるだけです。差分のクラス。状況とあなたの仕事が行われます

$("#top").click(function(){
  if($(".block").hasClass('Down')==false && $(".block").hasClass('Stop')==false)
  {
    $(".block").animate({"top": "+=300px"}, "slow").addClass('Down');
  }
  else
  {
        $(".block").animate({"top": "0px"}, "slow").removeClass('Down').addClass('Stop');
  }

});

ライブデモ