<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery动画效果演示</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
background-color: yellow;
float: left;
margin: 10px;
}
</style>
<!-- 引入Jquery库 -->
<script type="text/javascript" src="jquery/jquery-1.7.2.js"></script>
<script type="text/javascript">
function func01(obj){
if(obj.value=='隐藏'){
$("#d1").hide("slow");
obj.value='显示';
}else{
$("#d1").eq(0).show("slow");
obj.value='隐藏';
}
}
function func02(obj){
if(obj.value=='隐藏'){
obj.value='显示';
}else{
obj.value='隐藏';
}
//$("#d1").toggle("slow");//切换显示隐藏
$("#d1").slideToggle("slow");//切换显示隐藏
}
function func03(obj){
$(".c1").fadeTo("slow",0.3);//变透明
$("div[id=d1]").toggle(
function(){
$(this).css("backgroundColor","red");
},
function(){
$(this).css("backgroundColor","green");
},
function(){
$(this).css("backgroundColor","blue");
}
);
}
function func04(obj){
//渐变动画效果
$(".c1").animate({height:500,width:500},
"slow",
function(){
$(this).css("backgroundColor","red");
$(this).html("<h2>效果变完了</h2>");
}
);//渐变效果
}
</script>
</head>
<body>
<input type="button" value="隐藏" οnclick="func01(this);">
<input type="button" value="隐藏" οnclick="func02(this);">
<input type="button" value="透明" οnclick="func03(this);">
<input type="button" value="动画" οnclick="func04(this);">
<hr>
<div id="d1">第一个</div>
<div id="d1">第二个</div>
<div id="d1">第三个</div>
<div class="c1">第四个</div>
<div class="c1">第五个</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery动画效果演示</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
background-color: yellow;
float: left;
margin: 10px;
}
</style>
<!-- 引入Jquery库 -->
<script type="text/javascript" src="jquery/jquery-1.7.2.js"></script>
<script type="text/javascript">
function func01(obj){
if(obj.value=='隐藏'){
$("#d1").hide("slow");
obj.value='显示';
}else{
$("#d1").eq(0).show("slow");
obj.value='隐藏';
}
}
function func02(obj){
if(obj.value=='隐藏'){
obj.value='显示';
}else{
obj.value='隐藏';
}
//$("#d1").toggle("slow");//切换显示隐藏
$("#d1").slideToggle("slow");//切换显示隐藏
}
function func03(obj){
$(".c1").fadeTo("slow",0.3);//变透明
$("div[id=d1]").toggle(
function(){
$(this).css("backgroundColor","red");
},
function(){
$(this).css("backgroundColor","green");
},
function(){
$(this).css("backgroundColor","blue");
}
);
}
function func04(obj){
//渐变动画效果
$(".c1").animate({height:500,width:500},
"slow",
function(){
$(this).css("backgroundColor","red");
$(this).html("<h2>效果变完了</h2>");
}
);//渐变效果
}
</script>
</head>
<body>
<input type="button" value="隐藏" οnclick="func01(this);">
<input type="button" value="隐藏" οnclick="func02(this);">
<input type="button" value="透明" οnclick="func03(this);">
<input type="button" value="动画" οnclick="func04(this);">
<hr>
<div id="d1">第一个</div>
<div id="d1">第二个</div>
<div id="d1">第三个</div>
<div class="c1">第四个</div>
<div class="c1">第五个</div>
</body>
</html>