Question

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

我想做什么：

点击元素（“＃page”）后，此代码应该有效：
$("#page").addClass('magictime perspectiveLeft');，因此页面元素应该向左（perspectiveLeft）。
完成此动画后，当我点击相同的元素（“＃page”）时，此代码应该起作用：
$("#page").addClass('magictime perspectiveLeftRetourn');，因此页面元素应返回其原始位置（perspectiveLeftRetourn）。

动画应该像打开和关闭的贺卡一样。

我该怎么做？赞赏改进动画的建议。

我使用https://github.com/miniMAC/magic/作为动画

Answer 1

选中此fiddle

我使用的代码是

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;
    });
});

单击时如何在1 div上应用2个动画

1 个答案: