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

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

使用您的代码

：

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动画

1 个答案: