1.显示，隐藏：
<!DOCTYPE html>
<html>
<head>
<title>jquery事件</title>
</head>
<script type="text/javascript" src='./js/jquery-3.2.1.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$('#hide').click(function() {
$('#p1').hide();
});
$('#show').click(function() {
$('#p1').show();
});
});
</script>
<body>
<p id="p1">看看我显示还是隐藏</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>
toggle()切换显示，隐藏：
<!DOCTYPE html>
<html>
<head>
<title>jquery事件</title>
</head>
<script type="text/javascript" src='./js/jquery-3.2.1.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function() {
$('#p1').toggle();
});
});
</script>
<body>
<p id="p1">看看我显示还是隐藏</p>
<button id="hide">隐藏</button>
</body>
</html>
2.淡入淡出：
<script type="text/javascript"> $(document).ready(function(){ $('button').click(function() { $('#p1').toggle(); $('#p1').fadeIn(); // 淡入已隐藏的元素 $('#p1').fadeOut(); // 淡出可见元素 $('#p1').fadeToggle(); // 在 fadeIn() 与 fadeOut() 方法之间进行切换 $("#p1").fadeTo("slow",0.15); // 允许渐变为给定的不透明度（值介于 0 与 1 之间 }); }); </script>
3.滑动：
<!DOCTYPE html>
<html>
<head>
<title>jquery事件</title>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<script type="text/javascript" src='./js/jquery-3.2.1.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
$("#panel").slideDown("slow");
$("#panel").slideUp("slow");
});
});
</script>
<body>
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div>
</body>
</html>
4.动画：
$("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', '150px' }); });
5.停止动画：
$("#stop").click(function(){ $("#panel").stop(); });
6.Callback:
$("button").click(function(){ $("p").hide("slow",function(){ alert("段落现在被隐藏了"); }); });
7.链：
$("#p1").css("color","red") .slideUp(2000) .slideDown(2000);