使用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
     init($elem,hiddenCall){
        if($elem.is(":hidden")){
            $elem.data("status","hidden");
            if(typeof hiddenCall==="function") hiddenCall();
        }else{
            $elem.data("status","shown");
        }    
    }
    公共show
     show($elem,callback){
        if($elem.data("status")==="show") return;
        if($elem.data("status")==="shown") ;

        $elem.data("status","show").trigger("show");
        callback();
    }
     公共hide
     hide($elem,1)">if($elem.data("status")==="hide") if($elem.data("status")==="hidden")  无动画方式
    var silent={
        init:init,show:($elem){
            show($elem,(){
                $elem.show();
                $elem.data("status","shown").trigger("shown");
            });
        },hide:($elem){
            hide($elem,1)">(){
                $elem.hide();
                $elem.data("status","hidden").trigger("hidden");
            });
        }
    }
     css3动画方式
    var css3={
        _init:($elem,className){
            $elem.addClass("transition");
            init($elem,1)">(){
                $elem.addClass(className);
            });        
        },_show:function(){动画执行完毕后执行shown
                $elem.data("status",1)">);
            })
            $elem.show();
            setTimeout((){
                $elem.removeClass(className);
            },20);            
        },_hide:);
            })
            $elem.addClass(className);
        },1)">淡入淡出
        fade:{
            init:($elem){
                css3._init($elem,"fadeOut");
            },1)">($elem){
                show($elem,1)">(){
                    css3._show($elem,1)">);    
                });
            },1)">($elem){
                hide($elem,1)">(){
                    css3._hide($elem,1)">);
                });
            }
        },1)">上下滑动
        slideUpDown:{
            init:($elem){        
                $elem.height($elem.height());//获取到元素被内容撑开的高度，动态设置高度
                css3._init($elem,"slideUpDownCollapse");        
                });
            },1)">左右滑动
        slideLeftRight:{
            init:($elem){        
                $elem.width($elem.width());获取到元素被内容撑开的高度，动态设置高度
                css3._init($elem,"slideLeftRightCollapse"淡入淡出式上下滑动
        fadeSlideUpDown:{
            init:($elem){        
                $elem.height($elem.height());淡入淡出式左右滑动
        fadeSlideLeftRight:{
            init:);
                });
            }
        }
    }
     js动画方式
    var js=(){
                $elem.stop()[mode]((){
                    $elem.data("status",1)">);
                });            
            });        
        },mode){
            hide($elem,1)">自定义初始化公共部分
        _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,1)">(){
                $elem.css(options);
            });
        },_customShow:(){
                var styles=$elem.data("styles");

                $elem.show();
                使用animate进行动画            
                $elem.stop().animate(styles,动画结束后的回调
                    $elem.data("status",1)">);
                });
            });        
        },_customHide:(){        
                $elem.stop().animate(options,1)">动画结束后的回调
                    $elem.hide();
                    $elem.data("status",1)">);
                });
            });
        },fade:{
            init:($elem){
                js._init($elem);
            },1)">($elem){
                js._show($elem,"fadeIn"($elem){
                js._hide($elem,1)">);
            }        
        },slideUpDown:{
            init:);
            }    
        },slideLeftRight:{
            init:($elem){
                js._customInit($elem,{
                    "width":0,"padding-left":0
                });
            },1)">($elem){
                js._customShow($elem);
            },1)">($elem){
                js._customHide($elem,1)">
                });
            }            
        },fadeSlideUpDown:{
            init:
                });
            }    
        },fadeSlideLeftRight:{
            init:
                });
            }    
        }
    }

    设置默认参数
    var defaults={
        css3:false"fade"
    };

    封装一个函数
     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);

         {
            show:$.proxy(mode.show,1)">this 改成jquery插件方式        
    $.fn.extend({
        showHide:(opt){
            this指向调用该插件的元素，这里是box
            可能是一个元素，也可以是多个元素，因此使用each遍历
            return this.each(var ui=$();
                 如果options传递的是参数对象，则options属性与defaults属性进行合并，存入空对象中赋值给options
                 如果options传递的不是对象，则为false，属性为defaults默认属性，并赋值给options
                 $.extend(target,obj1,objn) 对象合并
                var options=$.extend({},defaults,1)">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"
                    opt为show或者hide字符串时，如：
                    box.showHide("show");
                */
                如果options是show或者hide的字符串，则执行方法
                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            
        });返回一个包含show和hide方法的对象mode

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

        box.on("show shown hide hidden",1)">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") 分别代表显示和隐藏操作

 

 这块分别是当元素开始显示 显示完成 开始隐藏 隐藏完成时要进行的操作

可以自己定义