点击时的 Jquery 动画

Question

单击按钮时，我调用了几个动画。我想切换这些动画，以便元素在第二次单击时返回到它们的起始位置。

这是我的脚本：

$("span.click").click(function() {
  $(".map").animate(
    {"opacity": "1"}, 200);
});

$("span.click").click(function() {
  $(".navigation").animate(
    {"bottom": "-100px"}, 200);
});

$("span.click").click(function() {
  $(".click").animate(
    {"bottom": "150px"}, 200);
});

如您所见，正在发生三个动画。需要使用哪种 if/else 语句才能创建可逆动画？

这是一个 jsfiddle：http://jsfiddle.net/6arjhkzc/2/

Answer 1

jsfiddle demo

$(document).ready(function() {
    $("span.click").click(function() {

        var io = this.io ^= 1; // Simple I/O toggler

      $(".map").animate({"opacity": io ? 1 : 0}, 200);
      $(".navigation").animate({"bottom": io ? -100 : -150}, 200);
      $(".click").animate({"bottom": io ? 150 : 100}, 200);
    });
});

将1 或0 存储在单击按钮io 属性内（用作布尔值，因为0 计算为false）。
与使用某些条件运算符 ?: 相比，您可以切换所需的值。

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
https://stackoverflow.com/a/22061240/383904

如果您不习惯使用按位异或运算符 ^ 作为切换器，您始终可以使用标准的 flip-flap 否定（demo）：

var io = this.io = !this.io;