1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>effects</title>
7 <script src="jquery.js"></script>
8 <link rel="stylesheet" href="gettysburg.css" type="text/css" media="screen" />
9 <style>
10 div
11 {
12 }
13 </style>
14 <script type="text/javascript">
15
16 //1修改内联的CSS, .css方法
17 /* $(document).ready(function () {
18 //jQuery变量的声明习惯以$
19 var $speech = $('div.speech');
20
21 var defaultSize = $speech.css('fontSize'); //font-size
22
23 $('#switcher button').click(function () {
24
25 //12.3px
26 var num = parseFloat($speech.css('fontSize'), 10);
27
28 //1.1放大字体和缩小字体功能
29 //if (this.id == 'switcher-large') {
30 // num *= 1.4;
31 //}
32 //else if (this.id == 'switcher-small') {
33 // num /= 1.4;
34 //}
35 //1.2加入默认功能
36 switch (this.id) {
37 case 'switcher-large':
38 num *= 1.4;
39 break;
40 case 'switcher-small':
41 num /= 1.4;
42 break;
43 default:
44 num = parseFloat(defaultSize, 10);
45 }
46 //$speech.css('fontSize', num + 'px');
47 ////1.3加入动画效果,animate动画。
48 $speech.animate({ fontSize: num + 'px' }, 'slow');
49 });
50 });*/
51
52 //2基本的隐藏和显示
53 //$(document).ready(function () {
54 // $('p:eq(1)').hide();
55 // $('a.more').click(function () {
56 // $('p:eq(1)').show();
57 // $(this).hide();
58 // return false;
59 // });
60 //});
61
62
63 //3.1效果和速度
64 //$(document).ready(function () {
65 // $('p:eq(1)').hide();
66 // $('a.more').click(function () {
67 // $('p:eq(1)').show('slow');
68 // $(this).hide();
69 // return false;
70 // });
71 //});
72
73 //3.2.淡入fadeIn淡出fadeOut 换到jquery 1.8.2
74 //$(document).ready(function () {
75 // $('p:eq(1)').hide();
76 // $('a.more').click(function () {
77 // $('p:eq(1)').fadeIn(2000); //2000
78 // $(this).hide();
79 // return false;
80 // });
81 //});
82
83
84
85 //4复合效果 fadeIn可以调到IE8试一下就行了。
86 //$(document).ready(function () {
87 // var $firstPara = $('p:eq(1)');
88 // $firstPara.hide();
89 // $('a.more').click(function () {
90 // if ($firstPara.is(':hidden')) {
91 // //$firstPara.fadeIn('slow');
92 // $firstPara.show('slow');
93 // //alert($(this).text()); //得到当前对象的文本
94 // //把a的文本换成read less
95 // $(this).text("-");
96 // }
97 // else {
98 // //$firstPara.fadeOut(3000);
99 // $firstPara.hide(3000);
100 // $(this).text('+');
101 // }
102 // return false;
103 // });
104 //});
105
106 //5.sildeToggal方法通过逐渐增加和减少元素的高度来实现显示或隐藏
107 //$(document).ready(function () {
108 // var $firstPara = $('p:eq(1)');
109 // $firstPara.hide();
110 // $('a.more').click(function () {
111 // $firstPara.slideToggle('slow');
112 // var $link = $(this);
113 // if ($link.text() == "read more") {
114 // $link.text('read less');
115 // } else {
116 // $link.text('read more');
117 // }
118 // return false;
119 // });
120 //});
121
122
123 //6自定义动画animate方法的使用，见示例1中最后注释部分，使用animate方法替换css方法
124 $(document).ready(function () {
125
126 var $firstPara = $('p:eq(1)');
127 $firstPara.hide();
128 $('a.more').click(function () {
129 var $link = $(this);
130 $firstPara.animate({
131 opacity: 'toggle', //opacity:透明度(调到IE8试一下) 简写属性值'slow','hide','toggle'：交替
132 height: 'toggle'
133 }, 'slow');
134 if ($link.text() == "read more") {
135 $link.text('read less');
136 }
137 else {
138 $link.text('read more');
139 }
140 return false;
141 });
142
143 });
144
145 //7.滑动工具箱(Switcher)
146 //$(document).ready(function () {
147 // $('div.label').click(function () {
148 // //取得演讲词这个div的宽度
149 // var paraWidth = $('div.speech p').outerWidth();
150
151 // var $switcher = $(this).parent();
152 // //取得switcher转换器宽度
153 // var switcherWidth = $switcher.outerWidth();
154 // $switcher.animate({
155 // 'left': paraWidth - switcherWidth,
156 // height: '+=20px',
157 // borderWidth: '5px'
158 // }, 'slow');
159
160 // });
161 //});
162
163
164 //8.并发与排队
165 //8.1排队
166 //$(document).ready(function () {
167 // $('div.label').click(function () {
168 // var paraWidth = $('div.speech p').outerWidth();
169 // var $switcher = $(this).parent();
170 // var switcherWidth = $switcher.outerWidth();
171 // $switcher
172 // .animate({ left: paraWidth - switcherWidth }, 'slow')
173 // .animate({ height: '+=20px' }, 'slow')
174 // .animate({ borderWidth: '5px' }, 'slow');
175 // });
176 //});
177
178 //8.2加入更多效果
179 //$(document).ready(function () {
180 // $('div.label').click(function () {
181 // var paraWidth = $('div.speech p').outerWidth();
182 // var $switcher = $(this).parent();
183 // var switcherWidth = $switcher.outerWidth();
184 // $switcher
185 // .fadeTo('fast', 0.5)
186 // .animate({
187 // 'left': paraWidth - switcherWidth
188 // }, 1000)
189 // .fadeTo('slow', 1.0)
190 // .slideUp('slow', function () {
191 // $switcher.css('backgroundColor', '#f00')
192 // })
193 // //
194 // .slideDown('slow');
195 // });
196 //});
197
198 //8.3改变animate参数写法，产生并发
199 //$(document).ready(function () {
200 // $('div.label').click(function () {
201 // var paraWidth = $('div.speech p').outerWidth();
202 // var $switcher = $(this).parent();
203 // var switcherWidth = $switcher.outerWidth();
204 // $switcher
205 // .fadeTo(1000, 0.5)
206 // .animate({
207 // 'left': paraWidth - switcherWidth
208 // }, { 'duration': 'slow', 'queue': false })
209 // .fadeTo('slow', 1.0)
210 // .slideUp('slow')
211 // .css('backgroundColor', '#f00')//注此处并未排队
212 // .slideDown('slow');
213 // });
214 //});
215
216 //8.4解决8.3的问题
217 //8.4.1利用queue方法
218 //$(document).ready(function () {
219 // $('div.label').click(function () {
220 // var paraWidth = $('div.speech p').outerWidth();
221 // var $switcher = $(this).parent();
222 // var switcherWidth = $switcher.outerWidth();
223 // $switcher
224 // .fadeTo(1000, 0.5)
225 // .animate({
226 // 'left': paraWidth - switcherWidth
227 // }, { 'duration': 'slow', 'queue': false })
228 // .fadeTo('slow', 1.0)
229 // .slideUp('slow')
230 // //queue排队
231 // .queue(function () {
232 // $switcher .css('backgroundColor', '#f00')
233 // //解除排除
234 // .dequeue();
235 // })
236 // .slideDown('slow');
237 // });
238 //});
239
240
241 //8.4.2利用回调函数
242 $(document).ready(function () {
243 $('div.label').click(function () {
244 var paraWidth = $('div.speech p').outerWidth();
245 var $switcher = $(this).parent();
246 var switcherWidth = $switcher.outerWidth();
247 $switcher
248 .fadeTo('fast', 0.5)
249 .animate({
250 'left': paraWidth - switcherWidth
251 }, 'slow')
252 .fadeTo('slow', 1.0)
253
254 .slideUp('slow')
255 //匿名函数就是回调部份
256 .slideDown('slow', function () {
257 $switcher.css('backgroundColor', '#f00');
258 });
259 });
260 });
261
262 //9
263 //$(document).ready(function () {
264 // $('p:eq(2)')
265 // .css('border', '1px solid #333')
266 // .click(function () {
267 // $(this).slideUp('slow')
268 // .next().slideDown('slow');
269 // });
270 // $('p:eq(3)').css('backgroundColor', '#ccc').hide();
271 //});
272
273 //10
274 $(document).ready(function () {
275 var $thirdPara = $('p:eq(2)');
276 $thirdPara
277 .css('border', '1px solid #333')
278 .click(function () {
279 $(this).next().slideDown('slow', function () {
280 $thirdPara.slideUp('slow');
281 });
282 });
283 $('p:eq(3)').css('backgroundColor', '#ccc').hide();
284 });
285
286 // 11 hover 当鼠标移到对象上时交替的执行两个函数参数.
287 $(document).ready(function () {
288 $('h2, div.button, div.label, span.more').hover(
289 function () {
290 $(this).addClass('hover');
291 },
292 function () {
293 $(this).removeClass('hover');
294 });
295 });
296
297 </script>
298 </head>
299 <body>
300 <div id="container">
301 <h2>Abraham Lincoln's Gettysburg Address</h2>
302 <div id="switcher">
303 <div class="label">
304 Text Size
305 </div>
306 <button id="switcher-default">
307 Default
308 </button>
309 <button id="switcher-large">
310 Bigger
311 </button>
312 <button id="switcher-small">
313 Smaller
314 </button>
315 </div>
316 <div class="speech">
317 <p>
318 Fourscore and seven years ago our fathers brought forth on this continent a new
319 nation, conceived in liberty, and dedicated to the proposition that all men are
320 created equal.
321 </p>
322 <p>
323 Now we are engaged in a great civil war, testing whether that nation, or any nation
324 so conceived and so dedicated, can long endure. We are met on a great battlefield
325 of that war. We have come to dedicate a portion of that field as a final resting-place
326 for those who here gave their lives that the nation might live. It is altogether
327 fitting and proper that we should do this. But, in a larger sense, we cannot dedicate,
328 we cannot consecrate, we cannot hallow, this ground.
329 </p>
330 <a href="#" class="more">read more</a>
331 <p>
332 The brave men, living and dead, who struggled here have consecrated it, far above
333 our poor power to add or detract. The world will little note, nor long remember,
334 what we say here, but it can never forget what they did here. It is for us the living,
335 rather, to be dedicated here to the unfinished work which they who fought here have
336 thus far so nobly advanced.
337 </p>
338 <p>
339 It is rather for us to be here dedicated to the great task remaining before us—that
340 from these honored dead we take increased devotion to that cause for which they
341 gave the last full measure of devotion—that we here highly resolve that these
342 dead shall not have died in vain—that this nation, under God, shall have a
343 new birth of freedom and that government of the people, by the people, for the people,
344 shall not perish from the earth.
345 </p>
346 </div>
347 </div>
348 </body>
349 </html>
