$(document).ready(function(){
$('#Wrapper').click(function (){
setTimeout(function(){
$('#Article_1').toggleClass('magictime perspectiveDown');
}, 1000);
setTimeout(function(){
$('#fold12').toggleClass('magictime perspectiveDown');
}, 2000);
setTimeout(function(){
$('#fold123').toggleClass('magictime perspectiveDown');
}, 3000);
}
});
我有这个 jQuery 代码，它工作得很好。当我第一次点击 wrapper 时，它会从上到下自行折叠。我想要的是当我单击包装器时再次重复相同的动画，但向上，即从下到上。
我正在使用https://github.com/miniMAC/magic
我该怎么做？我们也欢迎改进动画的建议。
最佳答案
我认为您需要使用#Wrapper存储一个标志，以便您知道如何调用动画，可能只是在某些data()中。然后，如果设置了标志，则需要颠倒顺序。您可以稍微简化一下，通过将元素存储在数组中并循环计算超时和动画顺序来避免复制粘贴所有内容:
更新
正如 Chirag 所暗示的，您还需要使用 perspectiveDownRetourn 以便折叠动画起作用。在应用magictime之前，您需要将其应用于开头的元素，最好是在 HTML 中，这样它们就不会在开头折叠起来。然后在代码中，切换 perspectiveDown 和 perspectiveDownRetourn:
$(document).ready(function(){
// add perspectiveDownRetourn before magictime to avoid perspectiveDownRetourn playing at the start
var articles = $("#Article_1, #fold12, #fold123").addClass('perspectiveDownRetourn');
window.setTimeout(function() { articles.addClass('magictime'); }, 100);
$('#Wrapper').data('showing', false).click(function () {
var $this = $(this);
var flag = $this.data('showing')
var elems = ["#Article_1", "#fold12", "#fold123"];
// if showing, reverse the display order
if(flag) {
elems.reverse();
}
// reverse the flag
$this.data('showing', !flag);
// loop elements and toggle both the down and up animations
for(var i = 0; i < elems.length; i++) {
setTimeout(function(){
this.toggleClass('perspectiveDown perspectiveDownRetourn');
}.bind($(elems[i]), flag), (i + 1) * 1000);
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://minimamente.com/example/magic_animations/css/magic.min.css" rel="stylesheet"/>
<button id="Wrapper">Click Me</button>
<div id="Article_1" class="">Article 1</div>
<div id="fold12" class="">Fold 12</div>
<div id="fold123" class="">Fold 123</div>根据您的 fiddle ，这里是完整的代码
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Two Column Layout</TITLE>
<script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://minimamente.com/example/magic_animations/css/magic.min.css" rel="stylesheet"/>
<script src="jquery.js"></script>
<script src="dist/animatecss.min.js"></script>
<link href="css/hover.css" rel="stylesheet" media="all">
<style type="text/css">
SECTION#Wrapper {
float: left;
width: 700px;
height: 1400px;
margin-top: 5px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 50px;
}
ARTICLE#Article_1 {
width: 730px;
height: 300px;
background-color: #ADAAAA;
}
HEADER#Header_Article_1 {
width: 730px;
height: 60px;
background-color: #DCDCDC;
}
SECTION#Section_Article_1 {
width: 680px;
height: 200px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
background-color: #F8EBEB;
}
ARTICLE#Article_2 {
width: 730px;
height: 300px;
background-color: #ADAAAA;
}
HEADER#Header_Article_2 {
width: 730px;
height: 60px;
background-color: #DCDCDC;
}
SECTION#Section_Article_2 {
width: 680px;
height: 200px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
background-color: #F8EBEB;
}
ARTICLE#Article_3 {
width: 730px;
height: 300px;
background-color: #ADAAAA;
}
HEADER#Header_Article_3 {
width: 730px;
height: 60px;
background-color: #DCDCDC;
}
SECTION#Section_Article_3 {
width: 680px;
height: 200px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
background-color: #F8EBEB;
}
ARTICLE#Article_4 {
width: 730px;
height: 300px;
background-color: #ADAAAA;
}
HEADER#Header_Article_4 {
width: 730px;
height: 60px;
background-color: #DCDCDC;
}
SECTION#Section_Article_4 {
width: 680px;
height: 200px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
background-color: #F8EBEB;
}
</style>
</HEAD>
<BODY>
<SECTION ID="Wrapper">
<div id="fold123">
<div id="fold12">
<ARTICLE ID="Article_1">
<HEADER ID="Header_Article_1">
<H2>Article One Title</H2>
</HEADER>
<SECTION ID="Section_Article_1">
<P>The contents of this section go here.</P>
</SECTION>
</ARTICLE>
<ARTICLE ID="Article_2">
<HEADER ID="Header_Article_2">
<H2>Article Two Title</H2>
</HEADER>
<SECTION ID="Section_Article_2">
<P>The contents of this section go here.</P>
</SECTION>
</ARTICLE>
</div>
<ARTICLE ID="Article_3">
<HEADER ID="Header_Article_3">
<H2>Article Three Title</H2>
</HEADER>
<SECTION ID="Section_Article_3">
<P>The contents of this section go here.</P>
</SECTION>
</ARTICLE>
</div>
<ARTICLE ID="Article_4">
<HEADER ID="Header_Article_4">
<H2>Article Four Title</H2>
</HEADER>
<SECTION ID="Section_Article_4">
<P>The contents of this section go here.</P>
</SECTION>
</ARTICLE>
</SECTION>
<FOOTER>
<P>Your footer content here</P>
</FOOTER>
<script type="text/javascript">
$(document).ready(function(){
// add magictime here to avoid perspectiveDownRetourn playing at the start
var articles = $("#Article_1, #fold12, #fold123").addClass('perspectiveDownRetourn');
window.setTimeout(function() { articles.addClass('magictime'); }, 100);
$('#Wrapper').data('showing', false).click(function () {
var $this = $(this);
var flag = $this.data('showing')
var elems = ["#Article_1", "#fold12", "#fold123"];
// if showing, reverse the display order
if(flag) {
elems.reverse();
}
// reverse the flag
$this.data('showing', !flag);
// loop elements and toggle both the down and up animations
for(var i = 0; i < elems.length; i++) {
setTimeout(function(){
this.toggleClass('perspectiveDown perspectiveDownRetourn');
}.bind($(elems[i]), flag), (i + 1) * 1000);
}
});
});
</script>
</BODY>
</HTML>关于jquery - 单击同一元素时如何反转动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27290253/