jQuery学习笔记第七节/Jq的效果之滑动效果
1.滑动
首先这个动画效果也前面的 show,hide,fade都是类似的一共有2个参数,第一个是动画的执行时间,第二个是动画执行完毕的回调函数.
slideDownslideUpslideToggle
下面详细的介绍这些个方法的使用:
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">点我可以滑出来</p>
14. <p id="p2">点我可以滑回去</p>
15. <p id="p3">点我可以在滑动的两个状态之间切换</p>
16. <div class="show_me">
17. 我出来啦...
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. //这里是回调函数,会在东海执行完毕的时候进行调用.
34. });
35. })
36. })
37. </script>
38.</html>
注意注意:
上面的代码写的很清晰了,当你使用 slideDown()的时候,被使用这个方法的元素要先不显示,才有动画的效果.反之亦然.这里就不再赘述了.
2.写在后面
写到了这里其实也就没有啥子的了,效果都可以实现了.这一节的 B 就装到这里,退朝.鼓掌,撒花
网友评论