javascript - 如何切换动画元素位置

Question

我有一个像这样的 jQuery:

 $(document).ready(function(){
       $("#title").click(function(){                
             $(this).animate({left:'30px'});                
       });
 });

我的问题是，是否可以在第二次点击时将jQuery元素返回到初始位置，并在第三次点击时返回到左侧:'30px'，依此类推...？

Answer 1

Demo playground

  // /////////  
  // EXAMPLE 1 
  // Toggle variable value (1,0,1,0...) using Modulo (%) operator

  var c = 0;
  $("#el").click(function(){
      $(this).animate({left: ++c%2 * 50 });                
  }); 

  // /////////
  // EXAMPLE 2
  // Read current position and use Conditional Operator (?:) 

  $("#el").click(function(){
      var leftAt0 = this.offsetLeft < 1 ; // Boolean (true if at 0px left)
      $(this).animate({left: leftAt0 ? 50 : 0 });                
  });

  // /////////
  // EXAMPLE 3
  // Toggle two values using array.reverse method

  var pos = [0, 50];
  $("#el").click(function(){
      $(this).animate({left: pos.reverse()[0] });                
  });