Question

我有一个像这样的jQuery：

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

我的问题是，是否可以在第二次点击时将jQuery元素返回到初始位置，然后返回到左边：第三次点击时返回'30px'，依此类推......？< / p>

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

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

如何切换动画元素位置

3 个答案: