jquery - 如何反转 JQuery 动画

Question

总体而言，我对 JQuery 和 Web 开发还很陌生，需要一些帮助。我已经用谷歌搜索了几天，但似乎找不到可行的解决方案。我在这里看到很多相同的问题，但许多答案在当前版本的 JQuery 中已被标记为已过时。

基本上，我有一个“div”，我希望在单击它时将其聚焦在屏幕中间。这部分工作正常。我无法弄清楚如何在第二次单击时让相同的“div”返回到其原始位置。

$(document).on("page:change", function() {
  $("#profile").on ("click", function() {
    $("#profile").animate({right: '15%', height: '+=50px', width: '+=25%'});
    $("#profile").css("position", "absolute"); // So that the div can maintain its normal position in bootstrap grid up until animation
    $("#fadeback").css("opacity", 0.6).fadeIn(300); // Fades everything else on page
  });
});

因此，我主要只需要一种方法来在第二次单击时“撤消”这组操作。如果您有与我当前实现完全不同的其他想法，我完全愿意接受。感谢您的帮助!!!

Answer 1

试试这个:

function firstClick() {
    alert('put your animation');
    $(this).one("click", secondClick);
}
function secondClick() {
    alert('put your reverse animation');
    $(this).one("click", firstClick);
}

$("#profile").one("click", firstClick);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="profile">
click me
</div>

使用您的代码:

function firstClick() {
   $("#profile").animate({right: '15%', height: '+=50px', width: '+=25%'});
    $("#profile").css("position", "absolute"); // So that the div can maintain its normal position in bootstrap grid up until animation
    $("#fadeback").css("opacity", 0.6).fadeIn(300); // Fades everything else on page
  });
}
function secondClick() {
// reverse your animation
}


$(document).on("page:change", function() {
$("#profile").one("click", firstClick);
});