0
$(document).ready(function(){
$("#page").click( function(){
$("#page").addClass('magictime perspectiveLeft');
$("#page").addClass('magictime perspectiveLeftRetourn');

What I am trying to do:

  1. After clicking element("#page") this code should work:
    $("#page").addClass('magictime perspectiveLeft');, so the page element should go left (perspectiveLeft).

  2. After completing this animation when I click the same element("#page") this code should work:
    $("#page").addClass('magictime perspectiveLeftRetourn');, so the page element should go back to its original position (perspectiveLeftRetourn).

The animation should be just like a greeting card opening and closing.

How do I do that? Suggestions improving animation are appreciated.

I use https://github.com/miniMAC/magic/ for animation

JasonMArcher
  • 14,195
  • 22
  • 56
  • 52
ankit gupta
  • 55
  • 9
  • Take a look here: [Callback when CSS3 transition finishes](http://stackoverflow.com/questions/9255279/callback-when-css3-transition-finishes) – alexP Nov 26 '14 at 10:39
  • `animation-delay`: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay – Abhitalks Nov 28 '14 at 08:37

1 Answers1

-1

Check this fiddle

The code which i have used is 

jQuery(document).ready(function($){
    var anim = false;
    $page = $("#page");
    $page.click( function(){
        if(!anim){
            anim = true;
            if($page.hasClass('perspectiveLeft'))
                $page.removeClass('perspectiveLeft').addClass('magictime perspectiveLeftRetourn');
            else
                $page.removeClass('perspectiveLeftRetourn').addClass('magictime perspectiveLeft');
        }
    })
    $page.on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        anim = false;
    });
});
Cerlin
  • 6,622
  • 1
  • 20
  • 28
  • thank you very much for such a great naswer..i am nearly loose my hope.But you solve my problem.thank you very much again. – ankit gupta Nov 28 '14 at 11:27
  • Welcome to stackoverflow. In this QA site, when an answer is realized, we do not append "(SOLVED)" to the question title. Instead, we mark a correct answer by clicking on the checkbox to the upper-left of that answer. If you come up with the answer yourself, then post your own answer, give it some time, and if no one has a better answer (your discretion), you can accept your own after a 48-hour wait period. – Cerlin Nov 28 '14 at 11:31