Reputation: 55
$(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);
}
});
I have this jQuery code which works fine. When I click on the wrapper the first time, it will fold on itself from top to bottom. What I want is for the same animation to repeat again when I click on wrapper but upwards, i.e. from bottom to top.
I am using https://github.com/miniMAC/magic
How do I do that? Suggestions improving animation are also appreciated.
Upvotes: 2
Views: 297
Reputation: 16609
I think you will need to store a flag with the #Wrapper
so you know which way round to call the animations, probably just in some data()
. Then if the flag is set you need to reverse the order. You can simplify this a bit and avoid just copy-pasting everything by storing the elements in an array and looping through that to calculate timeouts and the animation order:
UPDATE
As Chirag hinted, you also need to use perspectiveDownRetourn
so the fold up animation works. You need to apply this to the elements at the start, preferably in the HTML, before you apply magictime
, so they do not fold up at the start. Then in the code, toggle both perspectiveDown
and 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>
Based on your fiddle, here is the full code working in place
<!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>
Upvotes: 4