javascript - アニメーション要素の位置を切り替える方法

Question

私は次のようなjQueryを持っています:

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

私の質問は、2 回目のクリックで jQuery 要素を最初の位置に戻し、3 回目のクリックで左に「30px」に戻すことは可能ですか?

Answer 1

デモプレイグラウンド

  // /////////  
  // 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] });                
  });

Answer 2

 $("#title").click(function(){
   var $this = $(this)
   $this.animate({left:$this.position().left ? 0 : '30px'});
 });

Answer 3

これを試して

$("#title").click(function() {
             $(this).animate({ left: '30px' }, function(e) {
                 $(this).animate({
                     left: '-=30px'
                 });
             });
         });