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

但问题是，这个效果只能执行一次，当我第二次点击它时，它永远不会执行，那么为什么会这样呢？ 我该如何解决问题？

这是唯一的示例：

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)的文档在这里。

Answer 2

请尝试此演示

我改用了回调。我希望我理解正确。

编辑：

这是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
            })
        });
    })
})​