jQuery學(xué)習(xí)筆記第七節(jié)/Jq的效果之滑動(dòng)效果
1.滑動(dòng)
首先這個(gè)動(dòng)畫效果也前面的 show,hide,fade都是類似的一共有2個(gè)參數(shù),第一個(gè)是動(dòng)畫的執(zhí)行時(shí)間,第二個(gè)是動(dòng)畫執(zhí)行完畢的回調(diào)函數(shù).
slideDownslideUpslideToggle
下面詳細(xì)的介紹這些個(gè)方法的使用:
1.<!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title></title>
6. <style type="text/css">
7. p{height: 20px;background: yellowgreen;text-align: center;}
8. .show_me{height: 100px;background: indianred;text-align: center;line-height: 100px;display: none;}
9. </style>
10. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
11. </head>
12. <body>
13. <p id="p1">點(diǎn)我可以滑出來(lái)</p>
14. <p id="p2">點(diǎn)我可以滑回去</p>
15. <p id="p3">點(diǎn)我可以在滑動(dòng)的兩個(gè)狀態(tài)之間切換</p>
16. <div class="show_me">
17. 我出來(lái)啦...
18. </div>
19. </body>
20. <script type="text/javascript">
21. $(function(){
22. //slideDown
23. $("#p1").click(function(){
24. $(".show_me").slideDown();
25. })
26. //slideUp
27. $("#p2").click(function(){
28. $(".show_me").slideUp("1000");
29. })
30. //slideToggle
31. $("#p3").click(function(){
32. $(".show_me").slideToggle("slow",function(){
33. //這里是回調(diào)函數(shù),會(huì)在東海執(zhí)行完畢的時(shí)候進(jìn)行調(diào)用.
34. });
35. })
36. })
37. </script>
38.</html>
注意注意:
上面的代碼寫的很清晰了,當(dāng)你使用 slideDown()的時(shí)候,被使用這個(gè)方法的元素要先不顯示,才有動(dòng)畫的效果.反之亦然.這里就不再贅述了.
2.寫在后面
寫到了這里其實(shí)也就沒(méi)有啥子的了,效果都可以實(shí)現(xiàn)了.這一節(jié)的 B 就裝到這里,退朝.鼓掌,撒花
