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

请尝试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
            })
        });
    })
})

Answer 2

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。

使用队列函数的Jquery动画只执行一次

2 个答案: