jQuery的動畫處理隊列功能只執行一次

Question

我有一個盒子，當我點擊它，我想盒子動畫第一，然後將其返回到原來的位置，代碼：

$('#test').click(function() { //#test is the box 
     var o ={  //remember the original position 
      "x":"0px", 
      "y":"0px"   
     } 

     $(this).animate({ 
      "left": "15px", 
      "top": "15px"   
     }).queue(function() { //afte execute the animate, return to its origin position 
      $(this).css({ 
       'left': o.x, 
       'top': o.y 
      })    
     }) 
    }) 

，但問題是，這個效果只能執行一次，當我第二次點擊它，它永遠不會執行，那麼爲什麼會發生這種情況？我該如何解決這個問題？

這裏是唯一example：

Answer 1

KiroSora09的答案可能是簡單的，但使用排隊功能的正確方法是這樣執行它之後，從隊列中刪除的功能：

$('#test').click(function() { //#test is the box 
    var o ={  //remember the original position 
     "x":"0px", 
     "y":"0px"   
    } 

    $(this).animate({ 
     "left": "15px", 
     "top": "15px"   
    }).queue(function(next) { //after execute the animate, return to its origin position 
     $(this).css({ 
      'left': o.x, 
      'top': o.y 
     })    
     next(); 
    }); 
})​; 

或像這樣：

$('#test').click(function() { //#test is the box 
    var o ={  //remember the original position 
     "x":"0px", 
     "y":"0px"   
    } 

    $(this).animate({ 
     "left": "15px", 
     "top": "15px"   
    }).queue(function() { //after execute the animate, return to its origin position 
     $(this).css({ 
      'left': o.x, 
      'top': o.y 
     }).dequeue(); 
    }); 
})​; 

這裏

工作演示：http://jsfiddle.net/jfriend00/qM2CJ/

文檔上.queue(fn)是here。

Answer 2

請嘗試this演示

我用一個回調來代替。我希望我理解正確。

編輯：

下面是javascript代碼：

$(function() { 
    $('#test').click(function() { 
     var o = { 
      "x": "0px", 
      "y": "0px" 
     } 

     $(this).animate({ 
      "left": "15px", 
      "top": "15px" 
     }, function() { 
      $(this).css({ 
       'left': o.x, 
       'top': o.y 
      }) 
     }); 
    }) 
})​