自己封装好的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") 分别代表显示和隐藏操作
这块分别是当元素开始显示 显示完成 开始隐藏 隐藏完成时要进行的操作
可以自己定义
联系客服