Question

I have a box, when I click on it, I want the box animate first and then return it to original position, the code:

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

but problem is ,this effect could only execute once, when I click it on the second time, it never execute, so why this happened? how can I solve the problem?

here is the only example:

Answer 1

KiroSora09’s answer is probably simpler, but the proper way to use queued functions is to remove the function from the queue after executing it like this:

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

or like this:

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

Working demo here: http://jsfiddle.net/jfriend00/qM2CJ/

Documentation on .queue(fn) is here.