jquery - ポスト アニメーション リンク スイッチ

Question

DOWN リンクがクリックされたときに DIV を下にスライドするように設定されたアニメーションがあります。アニメーションが終了したときにダウン リンクをアップ リンクに置き換えて、DIV を返せるようにしたいと考えています。DIV をアニメーション化して開始位置に戻す JQuery が設定されます。私が苦労しているのは、ダウン DIV とアップ DIV を切り替えることだけです。

ここにコードがありますhttp://jsfiddle.net/pC6fC/20/

Answer 1

次のように、アニメーションが完了したらコールバックを実行するように指定できます。

var toggleButton = function () {
    $(".link, .link1").toggle();
};

/* Slides down alert banner */
$(function(){ 
    $(".link").click(function(){
        $(".box1").animate({'margin-top':150}, 500, toggleButton);
    });
});

/* Slides up alert banner */
$(function(){
    $(".link1").click(function(){
        $(".box1").animate({'margin-top':0}, 500, toggleButton);
    });
});

私もあなたのCSSに変更visibility: hiddenしました。display: none

フィドルを参照してください。

Answer 2

ここにフィドルがあります：http：//jsfiddle.net/ttu9t/

<div class="link">DOWN</div>
<div class="box1"></div>
<div class="box2"></div>​

js：

$(function(){ 
     $(document).on('click', '.link', function(){
        $('.box1').animate({'margin-top':150}, 500);
        $(this).text('UP');
        $(this).removeClass('link');
        $(this).addClass('link1');
    });
    $(document).on('click', '.link1', function(){
        $('.box1').animate({'margin-top':0}, 500);
        $(this).text('DOWN');
        $(this).removeClass('link1');
        $(this).addClass('link');
    });
});

link1を表示することを忘れないでください：

.link1 {
}

---

アップデート

http://jsfiddle.net/ttu9t/2/

Answer 3

多分あなたはこれをするために関数toggle（）を使うことを試みることができます。

divを非表示または表示するために使用されます。

 <script type="text/javascript">
   function togglefield(classname) {
      $("." + classname).toggle("slow")
 </script>



 <button onclick="togglefield('test')"> test </button>

 <div class="info"><br/><br/><br/></div>

これは確かに改善されるかもしれませんが、それは私があなたのニーズについて考えたものです。