老师，求帮忙

来源：2-5 用css3实现淡入淡出效果（2）

qq_初晴moment_5

2019-10-31 16:58:01

<!DOCTYPE html>
<html>
<head>
	<title>显示隐藏模块</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<style type="text/css">
		body{
			width: 400px;
			margin: 0 auto;
		}
		.btn{
			width: 50%;
			height: 30px;
		}
		#box{
			display: none;
			width: 100%;
			height: 200px;
			background-color: red;
		}
		.transition{
			-webkit-transition: all 0.5s;
    		-ms-transition: all 0.5s;
    		-moz-transition: all 0.5s;
    		-o-transition: all 0.5s;
    		transition: all 0.5s;
		}
		.fadeOut{
			visibility: hidden;
			opacity: 0;
		}
	</style>
</head>
<body>
	<button id="btn_show" class="btn">显示</button><button id="btn_hide" class="btn">隐藏</button>
	<div id="box" class=""></div>
	<button class="btn">显示2</button>
	<script type="text/javascript" src="js/jQuery.js"></script>
	<script type="text/javascript" src="js/showhide.js"></script>
	<script type="text/javascript">
		var $box=$("#box");
		css3.fade.init($box);
		$("#btn_show").on("click",function(){
			css3.fade.show($box);
		});
		$("#btn_hide").on("click",function(){
			css3.fade.hide($box);
		});
		//发布订阅模式
		$box.on("show shown hide hidden",function(e){
			console.log(e.type);
		});
	</script>
</body>
</html>

function init($elem,hiddenCallback){
	if($elem.is(':hidden')){//hidden
		$elem.data("status","hidden");
		if(typeof hiddenCallback === 'fuction') hiddenCallback();
	}else{//shown
			$elem.data("status","shown");
	}
}
function show($elem,callback){
	// 防止多次点击多次触发事件
	if($elem.data("status") === "show") return;
	if($elem.data("status") === "shown") return;

	$elem.data('status','show').trigger("show");
	callback();
}
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");
		});
	}
};
var css3={
	fade:{
		init:function($elem){
			// 初始化时程序自动的帮我添加transition
			$elem.addClass("transition");
			//判断刚开始一进去是否是初始化的状态
			init($elem,function(){
				$elem.addClass("fadeOut");
			});
		},
		show:function($elem){
			show($elem,function(){
				// 只绑定一次，执行完立刻解除掉使用one；先off事件，可以实现连续点击show和hide按钮时，可以把show的shown事件中断掉，只调用hide的hidden事件
				$elem.off("transitionend").one("transitionend",function(){
					$elem.data('status','shown').trigger("shown");
				});
				$elem.show();
				// 将同步编程异步
				setTimeout(function(){
					$elem.removeClass("fadeOut");
				},20);
			});	
		},
		hide:function($elem){
			hide($elem,function(){
				// 当动画执行完毕将其隐藏
				$elem.off("transitionend").one("transitionend",function(){
					$elem.hide();
					$elem.data('status','hidden').trigger("hidden");
				});
				$elem.addClass("fadeOut");
			});
		}
	},slideUpDown:{
		show:function(){},
		hide:function(){}
	},slideLeftRight:{
		show:function(){},
		hide:function(){}
	},fadeSlideUpDown:{
		show:function(){},
		hide:function(){}
	},fadeslideLeftRight:{
		show:function(){},
		hide:function(){}
	}
};
var js={
	fade:{
		show:function(){},
		hide:function(){}
	},slideUpDown:{
		show:function(){},
		hide:function(){}
	},slideLeftRight:{
		show:function(){},
		hide:function(){}
	},fadeSlideUpDown:{
		show:function(){},
		hide:function(){}
	},fadeslideLeftRight:{
		show:function(){},
		hide:function(){}
	}
};

把方法封装之后，第一次点击btn_show的时候只出来show，却不会出现shown，点完btn_hide之后再点击btn_show就会出现shown了，不知道什么情况，请老师帮忙