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