CODEWITHSUNDEEP
jqueryhtmlcss
ankit gupta
ankit gupta

Reputation: 55

how to reverse the animation when clicking on same element

$(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

Answers (1)

Rhumborl
Rhumborl

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

Related Questions