如何反转 JQuery 动画

Posted 2023-05-08

【中文标题】如何反转 JQuery 动画

【英文标题】：How to Reverse JQuery Animation

【发布时间】：2016-07-23 14:00:52

【问题描述】：

总的来说，我对 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
  );
);

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

【问题讨论】：

你可以创建一个 jsFiddle 什么的吗？

【参考方案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);
);

【讨论】：

今晚下课后我会试一试并报告，谢谢！

我能够挤出时间来做这件事，而且效果很好！谢谢！我会赞成你的回答，但我没有足够的代表。