<!-- 事件触发前后执行其他操作的三种方式：
多适用于：公众号的订阅，有订阅的可以收到文章，没有订阅的收不到文章。
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<link rel="stylesheet" href="css/base.css">
<style>
.container {
width: 400px;
margin: 0 auto;
background: #f0f;
}
button {
width: 50%;
height: 30px;
text-align: center;
float: left;
}
.box {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div class="container">
<button class="show">显示</button>
<button class="hide">隐藏</button>
<div class="box"></div>
</div>
<script src="js/jquery.js"></script> <!-- 第一种方式：直接在JS事件触发前后 直接进行操作 -->
<!-- <script>
//静悄悄的显示
var silent = {
show:function($ele,showCallback,shownCallback){
// $ele.html("<p>我在显示之前已经显示了</p>");
if (typeof showCallback === 'function') showCallback();
$ele.show();
if (typeof shownCallback === 'function') shownCallback();
// setTimeout(function(){
// $ele.html($ele.text() + "<p>我在box显示之后显示</p>")
// },1000)
},
hide:function($ele){
$ele.hide();
}
}; var $box = $('.box');
var $show = $('.show');
var $hide = $('.hide');
//单击显示$box
$show.on('click',function(){
silent.show($box,function(){
$box.html("<p>我在显示之前已经显示了</p>");
},function(){
setTimeout(function(){
$box.html($box.text() + "<p>我在box显示之后显示</p>")
},1000)
}); // silent.show($box);
})
//单击显示$box
$hide.on('click',function(){
silent.hide($box);
})
</script> --> <!-- 第二种方式：事件触发前后的操作，封装成两个函数，分别放于事件触发前后 -->
<!-- <script>
//静悄悄的显示
var silent = {
show:function($ele){
$ele.html("<p>我在显示之前已经显示了</p>");
$ele.show();
setTimeout(function(){
$ele.html($ele.html() + "<p>我在box显示之后显示</p>");
},1000); },
hide:function($ele){
$ele.hide();
}
}; var $box = $('.box');
var $show = $('.show');
var $hide = $('.hide');
//单击显示$box
$show.on('click',function(){
silent.show($box);
})
//单击显示$box
$hide.on('click',function(){
silent.hide($box);
})
</script> -->
</body>
</html>
<!-- 第三种方式：事件触发前后的操作，使用trigger触发已经封装好的函数 -->
===================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<!-- 一定要引入jQuery.js文件，否则无法运行 -->
<link rel="stylesheet" href="css/base.css">
<style>
.container {
width: 400px;
margin: 0 auto;
background: #f0f;
}
button {
width: 50%;
height: 30px;
text-align: center;
float: left;
}
.box {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div class="container">
<button class="show">显示</button>
<button class="hide">隐藏</button>
<div class="box"></div>
</div>
<script src="js/jquery.js"></script>
<script>
//静悄悄的显示
var silent = {
show:function($ele){
//$ele显示之前触发$ele的show事件，所以要在外面给对象$ele绑定show事件
$ele.trigger('show');
$ele.show();
//$ele显示之后触发$ele的shown事件，所以要在外面给对象$ele绑定shown事件
$ele.trigger('shown');
},
hide:function($ele){
//$ele隐藏之后触发$ele的hide事件，所以要在外面给对象$ele绑定hide事件
$ele.trigger('hide');
$ele.hide();
//$ele隐藏之后触发$ele的hiden事件，所以要在外面给对象$ele绑定hiden事件
$ele.trigger('hiden');
}
};
var $box = $('.box');
var $show = $('.show');
var $hide = $('.hide');
//单击显示按钮 显示$box
$show.on('click',function(){
silent.show($box);
})
//单击隐藏按钮 隐藏$box
$hide.on('click',function(){
silent.hide($box);
}) //这里只是进行对象事件的绑定而已。绑定了四个事件，可以使用 e.type 进行判断具体执行哪个事件，从而执行相应的操作。
//该函数可以定义多次，执行其他操作。这是第一次定义：改变对象的html内容
//该函数定义多次，就执行多次，如console.log(e.type)就输出多次。
$box.on('show shown hide hiden',function(e){
//两个都是$box对象，这里只能使用$box，为什么不能使用$(this)呢？
console.log( $(this));
console.log( $box); //每次触发事件时，判断其类型，指定对应类型的代码
if (e.type === 'show') {
$box.html('我在显示之前已经显示了');
}else if (e.type === 'shown') {
setTimeout(function(){
$box.html($box.html() + "<p>我在显示之后再显示</p>")
},1000);
}
}) //这里只是进行对象事件的绑定而已。绑定了四个事件，可以使用 e.type 进行判断具体执行哪个事件，从而执行相应的操作。
//该函数可以定义多次，执行其他操作。这是第二次定义：改变对象的背景颜色
//该函数定义多次，就执行多次，如console.log(e.type)就输出多次。
$box.on('show shown hide hiden',function(e){
console.log(e.type);
//两个都是$box对象，这里只能使用$box，为什么不能使用$(this)呢？
console.log( $(this));
console.log( $box); //每次触发事件时，判断其类型，指定对应类型的代码
if (e.type === 'show') {
$box.css({background:'#f0f'});
}else if (e.type === 'shown') {
setTimeout(function(){
$box.css({background:'#00f'});
},2000);
}else if (e.type === 'hide') {
alert('在隐藏$box之前，跳出一个提示框');
}else if (e.type === 'hiden') {
setTimeout(function(){
var p = document.createElement('div');
var textNode = document.createTextNode('这是隐藏$box，1秒后显示的内容');
p.appendChild(textNode);
document.getElementsByTagName('body')[0].appendChild(p);
},1000);
}
})
</script>
</body>
</html>