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动画。

Answer 2

使用 jQuery，这对我来说似乎很容易。您所做的是，您为所有按钮提供相同的类名，并在单击其中一个按钮时循环遍历所有按钮。因为您可以获得元素集合，所以它看起来很像这样：

$(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%'});
  });
});