如何反转 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
  });
});

所以，我主要只需要一种方法来在第二次点击时 'undo' 这组操作。如果您有与我当前实施完全不同的其他想法，我完全愿意接受。谢谢帮忙！！！

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);
});

如何反转 JQuery 动画

How to Reverse JQuery Animation

html

css

jquery

jquery-ui

jquery-animate