jquery - 一个 div 上的多个动画

Question

所以我有一个背景图像和一个蒙版图像。我有一组四个按钮，我想在单击它们时将顶部图像移动到不同的位置。我一直在测试 jquery animate 函数，但之后我无法将图像恢复到其原始状态，我知道这可能是错误的方式，但这是我迄今为止对 jquery 所做的：

<script>

$("#right").click(function() {
$("#content").animate(
        {"left": "+=200px"},
        "slow");
});
$("#left").click(function() {
$("#content").animate(
        {"left": "-=200px"},
        "slow");
});

$("#farRight").click(function() {
$("#content").animate(
        {"left": "+=400px"},
        "slow");
});


</script>

任何帮助将不胜感激！

Answer 1

您需要存储原始位置，以便返回到该位置。我会使用jQuery的data方法来做到这一点：

$("#content").data("originalPosition", $("#content").position());

$("#return").click(function() {
    $("#content").animate({
        "left": $("#content").data("originalPosition").left
    }, "slow");
});

http://jsfiddle.net/ryanbrill/KPLTy/