关于JQuery动态显示与隐藏
Callback 函数在当前动画 100% 完成之后执行。
许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。
例子：$("p").hide("slow")
speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。
$("button").click(function(){
$("p").hide(1000);
});
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/lib/jquery/1.8.3/jquery.js"></script> <script type="text/javascript" src="js/my_jquery_hide.js"></script> <!--注意:样式分格 style--> <!-- <script type="text/css"> div.ex { background-color: #77D1F6; padding: 7px; border: solid 1px #c3c3c3; } </script> --> <style type="text/css"> div.ex { background-color: #e5eecc; padding: 7px; border: solid 1px #c3c3c3; } </style> </head> <body> <h3>中国办事处</h3> <div class="ex"> <button class="hide" type="button">隐藏</button> <p>联系人：张先生<br/> 北三环中路 100 号<br/> 北京</p> </div> <h3>美国办事处</h3> <div class="ex"> <button class="hide" type="button">隐藏</button> <p>联系人：David<br/> 第五大街 200 号<br/> 纽约</p> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/lib/jquery/1.8.3/jquery.js"></script> <script type="text/javascript" src="js/my_jquery_load.js"></script> </head> <body> <div id="myDiv"><h2>hello world</h2></div> <button>通过jquery-ajax改变Div内容</button> </body> </html>
/** * Created by kikop on 2017/6/6. */ $(document).ready(function () { //即是特定button的点击事件 $(".ex .hide").click(function(){ $(this).parents(".ex").hide("slow"); }); });
高阶系列:
/** * Created by kikop on 2017/6/6. */ $(document).ready(function () { //即是特定button的点击事件 $(".ex .hide").click(function () { //$(this).parents(".ex").hide("slow"); $(this).parents(".ex").hide(1000, function () { alert("The paragraph is now hidden"); }) }); });
