一、隐藏与显示
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.10.1.min.js"></script>
<script src="index.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<!--<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">隐藏/显示</button>-->
<script>
for(var i=0;i<5;i++){
$("<div>").appendTo(document.body);
}
$("div").click(function(){
$(this).hide(2000,function(){
$(this).remove();
});
});
</script>
</body></html>$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(1000);
});
$("#show").click(function(){
$("p").show(1000);
});
$("#toggle").click(function(){
$("p").toggle(500);
});});div{
background: aqua;
width: 50px;
height: 50px;
margin: 2px;
float: left;}
二、淡入淡出
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.10.1.min.js"></script>
<script src="fade.js"></script>
</head>
<body>
<button id="in">fadeIn</button>
<button id="out">fadeOut</button>
<button id="toggle">fadeToggle</button>
<button id="to">fadeTo</button>
<div id="div1" style="width: 80px;display:none;height: 80px; background-color: aqua;"></div>
<div id="div2" style="width: 80px;display:none;height: 80px; background-color: #009B86;"></div>
<div id="div3" style="width: 80px;display:none;height: 80px; background-color: #333333;"></div>
</body></html>$(document).ready(function(){
$("#in").on("click",function(){
$("#div1").fadeIn(1000);
$("#div2").fadeIn(1000);
$("#div3").fadeIn(1000);
});
$("#out").on("click",function(){
$("#div1").fadeOut(1000);
$("#div2").fadeOut(1000);
$("#div3").fadeOut(1000);
});
$("#toggle").on("click",function(){
$("#div1").fadeToggle(1000);
$("#div2").fadeToggle(1000);
$("#div3").fadeToggle(1000);
});
$("#to").on("click",function(){
$("#div1").fadeTo(1000,0.5);
$("#div2").fadeTo(1000,0.7);
$("#div3").fadeTo(1000,0.3);
});});
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jQuery