0

我有一个盒子，当我点击它时，我希望盒子先动画然后将其返回到原始位置，代码：

$('#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
            })               
        })
    })

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

这是唯一的例子：

4

2 回答 2

1

请试试这个演示

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

编辑：

这是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
            })
        });
    })
})​
于 2012-06-20T06:53:58.087 回答
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)这里。

于 2012-06-20T08:09:40.187 回答