使用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="https://www.cnblogs.com/chenyingying0/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" >顯示</button><button id="btn-hide" >隱藏</button>
    <div >
        內容<br>
        撐開<br>
        高度<br>
    </div>
    <button >測驗占位問題</button>

    <script src="https://www.cnblogs.com/chenyingying0/js/jquery.js"></script>
    <script src="https://www.cnblogs.com/chenyingying0/js/transition.js"></script>
    <script src="https://www.cnblogs.com/chenyingying0/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在之前的文章中已貼：https://www.cnblogs.com/chenyingying0/p/12363649.html

base.css：https://www.cnblogs.com/chenyingying0/p/12363689.html

簡單解釋一下：

這塊是設定選擇css3影片的slideLeftRight效果

當然在showhide.js里是有設定過默認選項的

這里的elem.showHide("show") elem.showHide("hide") 分別代表顯示和隱藏操作

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

可以自己定義

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7172.html

標籤：jQuery

上一篇：jQuery 無法添加 EL 運算式到jsp檔案

下一篇：NC65怎樣改變表體某一行的顏色