使用jquery封裝的動畫腳本（無動畫、css3動畫、js動畫）

本身封裝好的showhide.js

包含無動畫、css3動畫、js動畫

包括：fade（淡入淡出）  slideUpDown（上下滑動）  slideLeftRight（左右滑動）  fadeSlideUpDown（淡入淡出+上下滑動）  fadeSlideLeftRight （淡入淡出+左右滑動）

(function($){
    var transition=window.mt.transition;//支持的transition寫法
    var isSupport=window.mt.isSupport;//是否支持transition

    // 公共init
    function init($elem,hiddenCall){
        if($elem.is(":hidden")){
            $elem.data("status","hidden");
            if(typeof hiddenCall==="function") hiddenCall();
        }else{
            $elem.data("status","shown");
        }    
    }
    //公共show
    function show($elem,callback){
        if($elem.data("status")==="show") return;
        if($elem.data("status")==="shown") return;

        $elem.data("status","show").trigger("show");
        callback();
    }
    // 公共hide
    function hide($elem,callback){
        if($elem.data("status")==="hide") return;
        if($elem.data("status")==="hidden") return;

        $elem.data("status","hide").trigger("hide");
        callback();
    }
    // 無動畫方式
    var silent={
        init:init,
        show:function($elem){
            show($elem,function(){
                $elem.show();
                $elem.data("status","shown").trigger("shown");
            });
        },
        hide:function($elem){
            hide($elem,function(){
                $elem.hide();
                $elem.data("status","hidden").trigger("hidden");
            });
        }
    }
    // css3動畫方式
    var css3={
        _init:function($elem,className){
            $elem.addClass("transition");
            init($elem,function(){
                $elem.addClass(className);
            });        
        },
        _show:function($elem,className){
            $elem.off(transition).one(transition,function(){//動畫執行完畢後執行shown
                $elem.data("status","shown").trigger("shown");
            })
            $elem.show();
            setTimeout(function(){
                $elem.removeClass(className);
            },20);            
        },
        _hide:function($elem,className){
            $elem.off(transition).one(transition,function(){
                $elem.hide();
                $elem.data("status","hidden").trigger("hidden");
            })
            $elem.addClass(className);
        },
        //淡入淡出
        fade:{
            init:function($elem){
                css3._init($elem,"fadeOut");
            },
            show:function($elem){
                show($elem,function(){
                    css3._show($elem,"fadeOut");    
                });
            },
            hide:function($elem){
                hide($elem,function(){
                    css3._hide($elem,"fadeOut");
                });
            }
        },
        //上下滑動
        slideUpDown:{
            init:function($elem){        
                //$elem.height($elem.height());//獲取到元素被內容撐開的高度，動態設置高度
                css3._init($elem,"slideUpDownCollapse");
            },
            show:function($elem){
                show($elem,function(){
                    css3._show($elem,"slideUpDownCollapse");        
                });
            },
            hide:function($elem){
                hide($elem,function(){
                    css3._hide($elem,"slideUpDownCollapse");
                });
            }
        },
        //左右滑動
        slideLeftRight:{
            init:function($elem){        
                $elem.width($elem.width());//獲取到元素被內容撐開的高度，動態設置高度
                css3._init($elem,"slideLeftRightCollapse");
            },
            show:function($elem){
                show($elem,function(){
                    css3._show($elem,"slideLeftRightCollapse");        
                });
            },
            hide:function($elem){
                hide($elem,function(){
                    css3._hide($elem,"slideLeftRightCollapse");
                });
            }
        },
        //淡入淡出式上下滑動
        fadeSlideUpDown:{
            init:function($elem){        
                $elem.height($elem.height());//獲取到元素被內容撐開的高度，動態設置高度
                css3._init($elem,"fadeOut slideUpDownCollapse");
            },
            show:function($elem){
                show($elem,function(){
                    css3._show($elem,"fadeOut slideUpDownCollapse");        
                });
            },
            hide:function($elem){
                hide($elem,function(){
                    css3._hide($elem,"fadeOut slideUpDownCollapse");
                });
            }
        },
        //淡入淡出式左右滑動
        fadeSlideLeftRight:{
            init:function($elem){        
                $elem.width($elem.width());//獲取到元素被內容撐開的高度，動態設置高度
                css3._init($elem,"fadeOut slideLeftRightCollapse");
            },
            show:function($elem){
                show($elem,function(){
                    css3._show($elem,"fadeOut slideLeftRightCollapse");        
                });
            },
            hide:function($elem){
                hide($elem,function(){
                    css3._hide($elem,"fadeOut slideLeftRightCollapse");
                });
            }
        }
    }
    // js動畫方式
    var js={
        _init:function($elem,callback){
            $elem.removeClass("transition");
            init($elem,callback);        
        },
        _show:function($elem,mode){
            show($elem,function(){
                $elem.stop()[mode](function(){
                    $elem.data("status","shown").trigger("shown");
                });            
            });        
        },
        _hide:function($elem,mode){
            hide($elem,function(){
                $elem.stop()[mode](function(){
                    $elem.data("status","hidden").trigger("hidden");
                });            
            });        
        },
        //自定義初始化公共部分
        _customInit:function($elem,options){//options是一個對象，包含全部要改變的屬性        
            var styles={};
            for(var o in options){
                styles[o]=$elem.css(o);
            }

            $elem.data("styles",styles);//若是不保存，則styles爲局部，沒法在其餘函數中使用

            js._init($elem,function(){
                $elem.css(options);
            });
        },
        _customShow:function($elem){
            show($elem,function(){
                var styles=$elem.data("styles");

                $elem.show();
                //使用animate進行動畫            
                $elem.stop().animate(styles,function(){//動畫結束後的回調
                    $elem.data("status","shown").trigger("shown");
                });
            });        
        },
        _customHide:function($elem,options){
            hide($elem,function(){        
                $elem.stop().animate(options,function(){//動畫結束後的回調
                    $elem.hide();
                    $elem.data("status","hidden").trigger("hidden");
                });
            });
        },
        fade:{
            init:function($elem){
                js._init($elem);
            },
            show:function($elem){
                js._show($elem,"fadeIn");
            },
            hide:function($elem){
                js._hide($elem,"fadeOut");
            }        
        },
        slideUpDown:{
            init:function($elem){
                js._init($elem);
            },
            show:function($elem){
                js._show($elem,"slideDown");
            },
            hide:function($elem){
                js._hide($elem,"slideUp");
            }    
        },
        slideLeftRight:{
            init:function($elem){
                js._customInit($elem,{
                    "width":0,
                    "padding-left":0,
                    "padding-right":0
                });
            },
            show:function($elem){
                js._customShow($elem);
            },
            hide:function($elem){
                js._customHide($elem,{
                    "width":0,
                    "padding-left":0,
                    "padding-right":0
                });
            }            
        },
        fadeSlideUpDown:{
            init:function($elem){
                js._customInit($elem,{
                    "opacity":0,
                    "height":0,
                    "padding-top":0,
                    "padding-bottom":0
                });
            },
            show:function($elem){
                js._customShow($elem);
            },
            hide:function($elem){
                js._customHide($elem,{
                    "opacity":0,
                    "height":0,
                    "padding-top":0,
                    "padding-bottom":0
                });
            }    
        },
        fadeSlideLeftRight:{
            init:function($elem){
                js._customInit($elem,{
                    "opacity":0,
                    "width":0,
                    "padding-left":0,
                    "padding-right":0
                });
            },
            show:function($elem){
                js._customShow($elem);
            },
            hide:function($elem){
                js._customHide($elem,{
                    "opacity":0,
                    "width":0,
                    "padding-left":0,
                    "padding-right":0
                });
            }    
        }
    }

    //設置默認參數
    var defaults={
        css3:false,
        js:false,
        animation:"fade"
    };

    //封裝一個函數
    function showHide($elem,options){
        var mode=null;

        if(options.css3 && isSupport){//css3動畫
            mode=css3[options.animation] || css3[defaults.animation];//容錯
        }else if(options.js){//js動畫
            mode=js[options.animation] || js[defaults.animation];
        }else{//無動畫
            mode=silent;
        }

        mode.init($elem);

        return {
            show:$.proxy(mode.show,this,$elem),
            hide:$.proxy(mode.hide,this,$elem)            
        };    
    }

    // 改爲jquery插件方式        
    $.fn.extend({
        showHide:function(opt){
            //this指向調用該插件的元素，這裏是box
            //多是一個元素，也能夠是多個元素，所以使用each遍歷
            return this.each(function(){
                var ui=$(this);
                // 若是options傳遞的是參數對象，則options屬性與defaults屬性進行合併，存入空對象中賦值給options
                // 若是options傳遞的不是對象，則爲false，屬性爲defaults默認屬性，並賦值給options
                // $.extend(target, obj1, objn) 對象合併
                var options=$.extend({},defaults,typeof opt==="object" && opt);
                    
                /*
                    opt爲參數對象時，如：
                    box.showHide({
                        css3:true,
                        animation:"slideLeftRight"            
                    });
                */        
                var mode=ui.data("showHide");    
                //mode對象實例只須要生成一次                    
                if(!mode){
                    mode=showHide(ui,options);//mode返回包含show和hide方法的一個對象
                    ui.data("showHide",mode);
                }
                
                /*
                    opt爲show或者hide字符串時，如：
                    box.showHide("show");
                */
                //若是options是show或者hide的字符串，則執行方法
                if(typeof mode[opt]==="function"){
                    mode[opt]();
                }
            })
            
        }
    });

})(jQuery);

頁面使用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>showhide</title>
    <link rel="stylesheet" href="../css/base.css">
    <style>
        body{
            width:400px;
            margin:0 auto;
        }
        button{
            width:50%;
            height:30px;
            background: #abcdef;
        }
        .box{
            width:400px;
            /*height:300px;*//*height撐開*/    
            /*padding:150px 0;*//*padding撐開*/        
            background-color:pink;
            overflow:hidden;/*被內容撐開高度，須要設置溢出隱藏*/
        }
        .transition{
            -webkit-transition:all .5s;
            -moz-transition:all .5s;
            -ms-transition:all .5s;
            -o-transition:all .5s;
            transition:all .5s;
        }
        .fadeOut{
            opacity: 0;
            visibility: hidden;
        }
        /*收縮樣式*/
        .slideUpDownCollapse{
            height:0 !important;/*避免由於優先級不夠而沒法生效*/
            padding-top:0 !important;
            padding-bottom:0 !important;
        }
        .slideLeftRightCollapse{
            width:0 !important;/*避免由於優先級不夠而沒法生效*/
            padding-left:0 !important;
            padding-right:0 !important;
        }
    </style>
</head>
<body>
    <button id="btn-show" class="btn">顯示</button><button id="btn-hide" class="btn">隱藏</button>
    <div class="box">
        內容<br>
        撐開<br>
        高度<br>
    </div>
    <button class="btn">測試佔位問題</button>

    <script src="../js/jquery.js"></script>
    <script src="../js/transition.js"></script>
    <script src="../js/showhide.js"></script>
    <script>

        var box=$(".box");

        //jquery插件方式傳參
        box.showHide({
            css3:true,
            animation:"slideLeftRight"            
        });//返回一個包含show和hide方法的對象mode

        $("#btn-show").on("click",function(){
            //jquery插件方式調用
            box.showHide("show");
        });
        $("#btn-hide").on("click",function(e){
            //jquery插件方式調用
            box.showHide("hide");
        });

        box.on("show shown hide hidden",function(e){
            if(e.type==="show"){
                console.log("show");
            }
            if(e.type==="shown"){
                console.log("shown");        
            }
            if(e.type==="hide"){
                console.log("hide");                        
            }
            if(e.type==="hidden"){
                console.log("hidden");                    
            }
        });

    </script>
</body>
</html>

注意：引入的transition.js在以前的文章中已貼：http://www.javashuo.com/article/p-nbnfsgpd-w.html

base.css：http://www.javashuo.com/article/p-hddyogwd-by.html

簡單解釋一下：

 

 這塊是設置選擇css3動畫的slideLeftRight效果

固然在showhide.js裏是有設置過默認選項的

 

 

 

 這裏的elem.showHide("show")  elem.showHide("hide") 分別表明顯示和隱藏操做

 

 這塊分別是當元素開始顯示 顯示完成 開始隱藏 隱藏完成時要進行的操做

能夠本身定義