1 <!-- 事件触发前后执行其他操作的三种方式：
2 多适用于：公众号的订阅，有订阅的可以收到文章，没有订阅的收不到文章。
3 -->
4 <!DOCTYPE html>
5 <html >
6 <head>
7 <meta charset="UTF-8">
8 <title>动画</title>
9 <link rel="stylesheet" href="css/base.css">
10 <style>
11 .container {
12 width: 400px;
13 margin: 0 auto;
14 background: #f0f;
15 }
16 button {
17 width: 50%;
18 height: 30px;
19 text-align: center;
20 float: left;
21 }
22 .box {
23 width: 100%;
24 height: 400px;
25 }
26 </style>
27 </head>
28 <body>
29 <div class="container">
30 <button class="show">显示</button>
31 <button class="hide">隐藏</button>
32 <div class="box"></div>
33 </div>
34 <script src="js/jquery.js"></script>
35
36 <!-- 第一种方式：直接在JS事件触发前后 直接进行操作 -->
37 <!-- <script>
38 //静悄悄的显示
39 var silent = {
40 show:function($ele,showCallback,shownCallback){
41 // $ele.html("<p>我在显示之前已经显示了</p>");
42 if (typeof showCallback === 'function') showCallback();
43 $ele.show();
44 if (typeof shownCallback === 'function') shownCallback();
45 // setTimeout(function(){
46 // $ele.html($ele.text() + "<p>我在box显示之后显示</p>")
47 // },1000)
48 },
49 hide:function($ele){
50 $ele.hide();
51 }
52 };
53
54 var $box = $('.box');
55 var $show = $('.show');
56 var $hide = $('.hide');
57 //单击显示$box
58 $show.on('click',function(){
59 silent.show($box,function(){
60 $box.html("<p>我在显示之前已经显示了</p>");
61 },function(){
62 setTimeout(function(){
63 $box.html($box.text() + "<p>我在box显示之后显示</p>")
64 },1000)
65 });
66
67 // silent.show($box);
68 })
69 //单击显示$box
70 $hide.on('click',function(){
71 silent.hide($box);
72 })
73 </script> -->
74
75 <!-- 第二种方式：事件触发前后的操作，封装成两个函数，分别放于事件触发前后 -->
76 <!-- <script>
77 //静悄悄的显示
78 var silent = {
79 show:function($ele){
80 $ele.html("<p>我在显示之前已经显示了</p>");
81 $ele.show();
82 setTimeout(function(){
83 $ele.html($ele.html() + "<p>我在box显示之后显示</p>");
84 },1000);
85
86 },
87 hide:function($ele){
88 $ele.hide();
89 }
90 };
91
92 var $box = $('.box');
93 var $show = $('.show');
94 var $hide = $('.hide');
95 //单击显示$box
96 $show.on('click',function(){
97 silent.show($box);
98 })
99 //单击显示$box
100 $hide.on('click',function(){
101 silent.hide($box);
102 })
103 </script> -->
104 </body>
105 </html>
106 <!-- 第三种方式：事件触发前后的操作，使用trigger触发已经封装好的函数 -->
107 ===================
108 <!DOCTYPE html>
109 <html >
110 <head>
111 <meta charset="UTF-8">
112 <title>动画</title>
113 <!-- 一定要引入jQuery.js文件，否则无法运行 -->
114 <link rel="stylesheet" href="css/base.css">
115 <style>
116 .container {
117 width: 400px;
118 margin: 0 auto;
119 background: #f0f;
120 }
121 button {
122 width: 50%;
123 height: 30px;
124 text-align: center;
125 float: left;
126 }
127 .box {
128 width: 100%;
129 height: 400px;
130 }
131 </style>
132 </head>
133 <body>
134 <div class="container">
135 <button class="show">显示</button>
136 <button class="hide">隐藏</button>
137 <div class="box"></div>
138 </div>
139 <script src="js/jquery.js"></script>
140 <script>
141 //静悄悄的显示
142 var silent = {
143 show:function($ele){
144 //$ele显示之前触发$ele的show事件，所以要在外面给对象$ele绑定show事件
145 $ele.trigger('show');
146 $ele.show();
147 //$ele显示之后触发$ele的shown事件，所以要在外面给对象$ele绑定shown事件
148 $ele.trigger('shown');
149 },
150 hide:function($ele){
151 //$ele隐藏之后触发$ele的hide事件，所以要在外面给对象$ele绑定hide事件
152 $ele.trigger('hide');
153 $ele.hide();
154 //$ele隐藏之后触发$ele的hiden事件，所以要在外面给对象$ele绑定hiden事件
155 $ele.trigger('hiden');
156 }
157 };
158 var $box = $('.box');
159 var $show = $('.show');
160 var $hide = $('.hide');
161 //单击显示按钮 显示$box
162 $show.on('click',function(){
163 silent.show($box);
164 })
165 //单击隐藏按钮 隐藏$box
166 $hide.on('click',function(){
167 silent.hide($box);
168 })
169
170 //这里只是进行对象事件的绑定而已。绑定了四个事件，可以使用 e.type 进行判断具体执行哪个事件，从而执行相应的操作。
171 //该函数可以定义多次，执行其他操作。这是第一次定义：改变对象的html内容
172 //该函数定义多次，就执行多次，如console.log(e.type)就输出多次。
173 $box.on('show shown hide hiden',function(e){
174 //两个都是$box对象，这里只能使用$box，为什么不能使用$(this)呢？
175 console.log( $(this));
176 console.log( $box);
177
178 //每次触发事件时，判断其类型，指定对应类型的代码
179 if (e.type === 'show') {
180 $box.html('我在显示之前已经显示了');
181 }else if (e.type === 'shown') {
182 setTimeout(function(){
183 $box.html($box.html() + "<p>我在显示之后再显示</p>")
184 },1000);
185 }
186 })
187
188 //这里只是进行对象事件的绑定而已。绑定了四个事件，可以使用 e.type 进行判断具体执行哪个事件，从而执行相应的操作。
189 //该函数可以定义多次，执行其他操作。这是第二次定义：改变对象的背景颜色
190 //该函数定义多次，就执行多次，如console.log(e.type)就输出多次。
191 $box.on('show shown hide hiden',function(e){
192 console.log(e.type);
193 //两个都是$box对象，这里只能使用$box，为什么不能使用$(this)呢？
194 console.log( $(this));
195 console.log( $box);
196
197 //每次触发事件时，判断其类型，指定对应类型的代码
198 if (e.type === 'show') {
199 $box.css({background:'#f0f'});
200 }else if (e.type === 'shown') {
201 setTimeout(function(){
202 $box.css({background:'#00f'});
203 },2000);
204 }else if (e.type === 'hide') {
205 alert('在隐藏$box之前，跳出一个提示框');
206 }else if (e.type === 'hiden') {
207 setTimeout(function(){
208 var p = document.createElement('div');
209 var textNode = document.createTextNode('这是隐藏$box，1秒后显示的内容');
210 p.appendChild(textNode);
211 document.getElementsByTagName('body')[0].appendChild(p);
212 },1000);
213 }
214 })
215 </script>
216 </body>
217 </html>