关于JQuery动态显示与隐藏
1.jquery_hide.html
Callback 函数在当前动画 100% 完成之后执行。
jQuery 动画的问题
许多 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>
2.代码分析
2.1.jquery_load.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>
2.2.jquery_hide.js
/**
* 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");
})
});
});