使用JS配合CSS实现Windows Phone中的磁贴效果

2020-05-02 08:17:26易采站长站整理

        
    $(".tile").mouseenter(function () {   
        $(this).children(".front").transit( {   
            "rotateX":"90deg"  
        },500,"easeInCirc",function () {   
            var back;   
            $(this).hide();   
            back = $(this).siblings(".back");   
            back.css({   
                "rotateX" : "-90deg"  
            });   
            back.show();   
            back.transit( {   
                "rotateX":"0deg"  
            },500,"easeOutCirc");   
        });   
            
    });   
        
    $(".tile").mouseleave(function () {   
        $(this).children(".back").transit( {   
            "rotateX" : "90deg"  
        },500,"easeInCirc",function () {   
            var front;   
            $(this).hide();   
            front = $(this).siblings(".front");   
            front.css({   
                "rotateX" : "-90deg"  
            });