JQuery相关效果
- 显示和隐藏：
show([毫秒值]) 显示
hide([毫秒值]) 隐藏
taggle([毫秒值]) 切换 - 滑入和滑出：
slidedown([毫秒值]) 滑入
slideup([毫秒值]) 滑出
slideToggle([毫秒值]) 切换 - 淡出和淡出：
fadeIn([毫秒值]) 淡入
fadeOut([毫秒值]) 淡出
fadeToggle([毫秒值]) 切换
fadeTo()
案例：
效果图：
代码：
<!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 src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //显示和隐藏 $("#b1").click(function(){ //$("#b1Div").hide(2000); $("#b1Div").toggle(2000); }) //滑入和滑出 $("#b2").click(function(){ //$("#b2Div").slideUp(2000); $("#b2Div").slideToggle(2000); }) //淡入和淡出 $("#b3").click(function(){ //$("#b3Div").fadeOut(2000); //$("#b3Div").fadeToggle(2000); $("#b3Div").fadeTo(1000,0.5,function(){ alert("淡化完成"); }) }) }); </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"></div> </body> </html>
