点击时的 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 属性内(用作 bool 值，因为 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;