javascript - ボタンをアニメーションで戻す方法

Question

小さな問題...私は思います！ボタンのメニューがあります。クリックすると移動します（アニメート）。別のものがクリックされたとき、私は最初のものが再び戻る必要があります。これまでのところ、クリックしたときにのみ移動し、再び戻ることはありません。コード：

$(document).ready(function(){
  var vari = $(this).attr('name');
    $('.nav_btn').click(function(){
  $(this).animate({left:'50%'});
    });
}); 

Answer 1

ここでこの使用を試してください.siblings()：

$(document).ready(function(){
    var vari = $(this).attr('name');
    $('.nav_btn').click(function(){
        $(this).animate({left:'50%'});
        $(this).siblings().animate({left: '0'});
    });
}); 

ワーキングデモ

animation duration必須ではありませんが、animateの を指定できます。

Answer 2

jQuery を使用すると、これは簡単に思えます。あなたがすることは、すべてのボタンに同じclassNameを与え、それらの1つがクリックされたときにそれらすべてをループすることです. 要素コレクションを取得できるため、これは次のようになります。

$(document).ready(function(){
  var vari = $(this).attr('name');

  $('.nav_btn').click(function(){
     var buttons = $('.nav_btn');
     for(var i=0; i<buttons.length; i++) {
         if(buttons[i]!=this)         //Avoid animating clicked button twice! Think of performance
           $(buttons[i].animate({left:'0%'});
     }
     $(this).animate({left:'50%'});
  });
});