使用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") 分别代表显示和隐藏操作

 

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

可以自己定义