【jQuery】animate翻牌特效

admin

var nummove=0;
var numout=0;
$(function(){
        $("#btncell li").hover(
                function(){
                if(nummove==0)
                {
                        nummove=1;
//this为hover容器，a为标签作为显示牌
//$("a",this)this下a标签动画,height为this a缩变为0，top为this标签高度一半值
                        $("a",this).animate({ height: "0px",top: "25px"}, 80,function(){nummove=0;});
//$("a",this)this下a标签动画,height为this a恢复到原值，top为this回位到原值
                        $("a",this).animate({ height: "28px",top: "0px"}, 80);
//牌的背景变色
                        $("a",this).css("background","yellow");
                }
                        },
                        function(){
                        if(numout==0)
                        {
                        numout=1;
                        $("a",this).animate({ height: "0px",top: "25px"}, 80,function(){numout=0;});
                        $("a",this).animate({ height: "28px",top: "0px"}, 80);
                        $("a",this).css("background","#888");
                        numout=0;
                        }
                        }
        )
        $("#btncell li a").click(function(){
                $(this).parents("li").css("z-index","2")
                $(this).animate({ height: "558px",top: "-255px",width: "1000px",left: "-460px",opacity: 'toggle',lineHeight: '558px',fontSize: '500px'}, 1000);
                $(this).animate({ height: "28px",top: "10px",width: "50px",left: "25px",opacity: 'toggle',lineHeight: '28px',fontSize: '12px'}, 400);
                $(this).parents("li").css("z-index","1")
        })
})