Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to apply 2 animation on 1 div when click on it

How to apply 2 animation on 1 div when click on it

Problem

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

Problem courtesy of: ankit gupta

Solution

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;
    });
});
Solution courtesy of: Cerlin Boss

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to apply 2 animation on 1 div when click on it

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×