JQuery簡單動畫效果演示
阿新 • • 發佈:2018-11-07
<!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="隱藏" onclick="func01(this);">
<input type="button" value="隱藏" onclick="func02(this);">
<input type="button" value="透明" onclick="func03(this);">
<input type="button" value="動畫" onclick="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="隱藏" onclick="func01(this);">
<input type="button" value="隱藏" onclick="func02(this);">
<input type="button" value="透明" onclick="func03(this);">
<input type="button" value="動畫" onclick="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>