所以我有以下代码，我试图在之间切换。我以为我可以添加/删除类，它可以工作，但它似乎没有。我尝试过切换，但那也没有用。有没有一种简单的方法，在第二次点击时，所有内容都会恢复？
$( ".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>
答案 0 :(得分：2)
修改，更新
尝试替换单个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>