DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<p>this is pp>
<button type="button" id="btn1">btn1button>
<button type="button" id="btn2">btn2button>
<button type="button" id="btn3">btn3button>
<div id="div1">
this is div1;
div>
<button type="button" id="btn4">btn4button>
<button type="button" id="btn5">btn5button>
<button type="button" id="btn6">btn6button>
<button type="button" id="btn7">btn7button>
<button type="button" id="btn8">click herebutton>
<div id="div2">
jQuery 滑动方法可使元素上下滑动。
div>
<script type="text/javascript" src="jquery.js">script>
<script type="text/javascript" src="jQ_function.js">script>
body>
html>
$(document).ready(function(){
$("#btn1").click(function(){
//hide(speed,callback) speed有slow/fast/毫秒
$("p").hide("slow")
});
$("#btn2").click(function(){
$("p").show("fast");
});
//hide和show重复
$("#btn3").click(function(){
$("p").toggle("slow");
});
//淡入淡出
//淡入
$("#btn4").click(function(){
$("div").fadeIn("slow");
});
//淡出
$("#btn5").click(function(){
$("div").fadeOut("slow");
});
//重复
$("#btn6").click(function(){
$("div").fadeToggle("slow");
});
//改变淡出透明度 fadeTo(speed,opacity,callback)
$("#btn7").click(function(){
$("div").fadeTo("slow",0.4);
});
//滑动效果
$("#btn8").click(function(){
//slideUp() slideDown()
$("#div2").slideToggle("fast");
})
});