使用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在之前的文章中已贴：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") 分别代表显示和隐藏操作

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

可以自己定义