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

Working demo

虽然不是必需的，但您可以提供animation duration动画。

Answer 2

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

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

如何为我的按钮设置动画

2 个答案:

Working demo