jQuery--效果
1.效果API简介
基本(通过改变元素的高度和宽度来进行显示和隐藏)
show(speed,fn)显示
参数一:speed速度
参数二:回调函数。动画效果完成之后回调函数
hide()隐藏
toggle()切换
滑动(通过改变元素的高度来进行显示或隐藏)
slideDown()显示
slideUp()隐藏
slideToggle()切换。参数同上
淡入淡出(通过改变元素透明度进行显示或隐藏)
fadeIn()
fadeOut()
fadeTo(speed,opacity,fn)
参数二:opacity透明度,0~1之间
2.代码实例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> div{ border:1px solid #000; width:100px; height:100px; } </style> <!-- 导入js库 ,注意:使用src属性之后,标签体中不能写入内容--> <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#b1").click(function(){ $("#b1Div").toggle("1000"); }); $("#b2").click(function(){ $("#b2Div").slideToggle("slow"); }); $("#b3").click(function(){ $("#b3Div").fadeToggle("slow"); }); }); </script> </head> <body> <input type="button" id="b1" value="显示/隐藏 b1Div" /> <div id="b1Div"></div> <br/> <input type="button" id="b2" value="滑出/滑入b2Div"/> <div id="b2Div"></div> <br/> <input type="button" id="b3" value="淡出/淡入b3Div"/> <div id="b3Div" style="background-color: red;"></div> </body> </html>