Jquery 点击动画

Question

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

这是我的脚本：

$("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);
    });
});

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

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

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

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

Jquery 点击动画

Jquery animation on click

jquery

click

jquery-animate