javascript - 切换许多动画和 CSS 更改

Question

所以我有下面的代码，我试图在它们之间切换。我以为我可以添加/删除类并且它可以工作但它似乎没有。我试过切换，但也没有用。有没有一种简单的方法可以在第二次点击时恢复一切？

$( ".next" ).click(function() {
$('.triangle').animate({  borderSpacing: -180 }, {
    step: function(now) {
      $(this).css('-webkit-transform','rotate('+now+'deg)'); 
      $(this).css('-moz-transform','rotate('+now+'deg)');
      $(this).css('transform','rotate('+now+'deg)');
    },
    duration:'slow'
},'linear');

$('.engine').css('background-image','url(/Incubator/wp-content/themes/incubator/images/basketball.jpg)');
$('.info-block').animate({"margin-left": "0px"}, 1000);
$('.triangle').animate({"margin-left": "380px"}, 1000);
$('.alt').css('display', 'block');
$('.main').css('display', 'none');
$('.messy').fadeOut("slow");
$('.compete').fadeIn("slow");
$(this).removeClass("next");
$(this).addClass("back");
});


$( ".back" ).click(function() {
$('.triangle').animate({  borderSpacing: 0 }, {
    step: function(now) {
      $(this).css('-webkit-transform','rotate('+now+'deg)'); 
      $(this).css('-moz-transform','rotate('+now+'deg)');
      $(this).css('transform','rotate('+now+'deg)');
    },
    duration:'slow'
},'linear');

$('.engine').css('background-image','url(/Incubator/wp-content/themes/incubator/images/engine.jpg)');
$('.info-block').animate({"margin-left": "800px"}, 1000);
$('.triangle').animate({"margin-left": "722px"}, 1000);
$('.alt').css('display', 'none');
$('.main').css('display', 'block');
$('.messy').fadeIn("slow");
$('.compete').fadeOut("slow");
$(this).removeClass("back");
$(this).addClass("next");
});

和 HTML

<div data-speed="5" class="engine parallax">
    <div class="wrapper">

        <div data-pos="550" class="next fade-in triangle"></div>
        <div data-pos="550" class="fade-in">
            <h3 class="messy">Get messy in the Incubator!</h3>
            <h3 class="compete">Compete in the Incubator!</h3>
        </div>
            <div data-pos="550" class="fade-in info-block">
                <p class="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p class="alt">Test text here sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <a href="">Get started today</a>
            </div>
    </div>
</div>

Answer 1

编辑、更新

尝试替换单个 click 事件，处理程序在 .triangle 元素上切换效果以添加删除 .next .back class 切换效果。

在 ,'linear' 处添加了 easing: ，其中选项属性 easing 未设置？在 .animate() 处添加了 complete 回调包含以 $(".engine").css 开头的 block complete 回调。

// set `.triangle` `.data("clicked")` `false`
var t = $(".triangle").data("clicked", false)
// save `css` `matrix()` positions
, props = []
// reset `matrix`
, p = props.length > 0 ? props.reverse() : false;
// define both initial, reset animations at single `click` event
t.click(function() {
  // cache value of `.data("clicked")` , initial: `false`
  var d = $(this).data("clicked") === true
  // initial index to iterate `props`
  , n = 0;
  // if `d` set `prop` to `-180` , else set `prop` to `0`
  $(d ? {
    prop: -180
  } : {
    prop: 0
  }).animate(d ? {
    prop: 0
  } : {
    prop: -180
  }, {
    step: function(now) {
      // if `d` === `true` , set `css` utilizing `props` array
      if (d) {
        // reset `t` to rotation
        t.css("transform", p[++n]) 
      };
      // set `t` rotation
      t.css("transform", "rotate(" + now + "deg)");
      // push `css` `matrix` to `props`
      props.push(t.css("transform"));
    },
    duration: "slow",
    easing: "linear",
    complete: function() {
      // cache `r` current `.data("clicked")` value
      var r = t.data("clicked") === false ? true : false;
      // toggle effects with `r` as reference
      $(".engine").css("background-image", "url(/Incubator/wp-content/themes/incubator/images/" + (!r ? "basketball" : "engine") + ".jpg)");
      // adjusted `margin-left` properties to `0px`, `800px`
      t.add(".info-block").animate({
        "margin-left": !r ? "0px" : "800px"
      }, 1000);
      $(".alt")[!r ? "show" : "hide"]();
      $(".main")[!r ? "hide" : "show"]();
      $(".messy, .compete").fadeToggle("slow");
      // set `.data("clicked")` to `r`
      t.data("clicked", r);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div data-speed="5" class="engine parallax">
  <div class="wrapper">

    <div data-pos="550" class="next fade-in triangle">next</div>
    <div data-pos="550" class="fade-in">
      <h3 class="messy">Get messy in the Incubator!</h3>
      <h3 class="compete">Compete in the Incubator!</h3>
    </div>
    <div data-pos="550" class="fade-in info-block">
      <p class="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p class="alt">Test text here sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <a href="">Get started today</a>
    </div>
  </div>
</div>