切换许多动画和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以切换效果。

增加了easing:在,'linear' ，其中选项属性easing未出现设置？ 添加complete在回调.animate()包括的块开头$(".engine").css内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>