JQ之小白計劃六（動畫）
阿新 • • 發佈：2018-12-17
1：show和hide
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>動畫</title> <script src="https://cdn.staticfile.org/jquery/1.7.1/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} body { font-size: 13px; line-height: 130%; padding: 60px } #panel { width: 300px; border: 1px solid #0050D0 } .head { height:24px;line-height:24px;text-indent:10px;background: #D49AE1; cursor: pointer;width:100%; } .content { padding: 10px; text-indent:24px; border-top: 1px solid #red;display:block; } </style> <script type="text/javascript"> $(function(){ $("#panel h5.head").toggle(function(){ $(this).next().hide(600); },function(){ $(this).next().show(600); }) }) </script> </head> <body> <div id="panel"> <h5 class="head">我是標題</h5> <div class="content"> 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 </div> </div> </body> </html>
2: fade
<script type="text/javascript">
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next().fadeOut();//淡出
},function(){
$(this).next().fadeIn();//淡入
})
})
</script>3: slide
<script type="text/javascript"> $(function(){ $("#panel h5.head").toggle(function(){ $(this).next().slideUp();//上下滑動（隱藏） },function(){ $(this).next().slideDown();//上下滑動（展示） }) }) </script>
4：animate的簡單使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Panel</title> <style type="text/css"> *{margin:0;padding:0;} body { padding: 60px } #panel {position: relative; width: 150px; height:150px;border: 1px solid #0050D0;background: #FAEB9E; cursor: pointer} </style> <script src="https://cdn.staticfile.org/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#panel").click(function(){ $(this).animate({left: "500px"}, 3000);//3秒運動到距離瀏覽器左邊500px處 }) }) </script> </head> <body> <div id="panel"></div> </body> </html>
5：animate的多重動畫
<script type="text/javascript">
$(function(){
//點選時:先位移後高度變成200px
$("#panel").click(function(){
$(this).animate({left: "500px"}, 3000).animate({height: "200px"}, 3000);
})
//點選時:位移和高度改變同時進行
$("#panel").click(function(){
$(this).animate({left: "500px",height:"200px"}, 3000);
})
})6：綜合動畫
<script type="text/javascript">
$(function(){
$("#panel").css("opacity", "0.5");//透明度為0.5
$("#panel").click(function(){
$(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)//第一步執行
.animate({top: "200px" , width :"200px"}, 3000 )//第二步執行
.fadeOut("slow");//第三步淡出
});
});7：css排隊問題
沒有排隊的css:
<script type="text/javascript">
$(function(){
$("#panel").css("opacity", "0.5");//設定不透明度
$("#panel").click(function(){
$(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
.animate({top: "200px" , width :"200px"}, 3000 )
.css("border","5px solid blue");//和第一個css同時執行，而不是等到第二個動畫結束
});
});
</script>排隊的css（回撥函式）:
<script type="text/javascript">
$(function(){
$("#panel").css("opacity", "0.5");//設定不透明度
$("#panel").click(function(){
$(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
.animate({top: "200px" , width :"200px"}, 3000 ,function(){
$(this).css("border","5px solid blue");//等第二個動畫執行完，才執行此css
})
});
});
</script>8: 判斷是否動畫
<script type="text/javascript">
$(function(){
//給id為mover的元素新增動畫.
function animateIt() {
$("#mover").slideToggle("slow", animateIt); // animateIt： 函式執行完之後，要執行的函式。
}
function animateIt2() {
$("#mover").fadeToggle("slow", animateIt2);//animateIt2 ：函式執行完之後，要執行的函式。
}
animateIt();//預設執行滑入滑出
$("button").click(function(){
if(!$('#mover').is(":animated")){//判斷元素是否正處於動畫狀態
//如果當前沒有進行動畫，則新增新動畫
$('#mover').fadeToggle("slow", animateIt2);
}else{
$('#mover').stop();
}
});
});
</script>
</head>
<body>
<button >click</button>
<div class="panel" id="mover">動畫元素</div>
</body>9：延遲的動畫
<script type="text/javascript">
$(function(){
$("#panel").css("opacity", "0.5");//設定不透明度
$("#panel").click(function(){
$(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
.delay(1000)
.animate({top: "200px" , width :"200px"}, 3000 )
.delay(2000)
.fadeOut("slow");
});
});
</script>10：fadeToggle和slideToggle
<script type="text/javascript">
$(function(){
//淡入淡出
$("#panel h5.head").click(function(){
$(this).next().fadeToggle();
})
//滑入滑出
$("#panel h5.head").click(function(){
$(this).next().slideToggle();
})
})
</script>
</head>
<body>
<div id="panel">
<h5 class="head">我是標題</h5>
<div class="content">
我是內容 我是內容 我是內容 我是內容
我是內容 我是內容 我是內容 我是內容
</div>
</div>
</body>11：animate仿其它方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿</title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }
.content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block; }
</style>
<script type="text/javascript">
$(function(){
$("button:eq(0)").click(function () {
$("div.content").hide().animate({ opacity : "1" } );
});
$("button:eq(1)").click(function () {
$("div.content").animate({height : "show" , width : "show" , opacity : "show" } , 600 );
});
$("button:eq(2)").click(function () {
$("div.content").animate({height : "show" } , 600 );
});
$("button:eq(3)").click(function () {
$("div.content").animate({ opacity : "show" } , 600 );
});
$("button:eq(4)").click(function () {
$("div.content").animate({ opacity : "0.2" } , 600 );
});
})
</script>
</head>
<body>
<button>隱藏元素並取消透明度</button>
<button>用animate仿show()</button>
<button>用animate仿slideDown()</button>
<button>用animate仿fadeIn()</button>
<button>用animate仿fadeTo()</button>
<div id="panel">
<h5 class="head">我是標題</h5>
<div class="content">
我是內容 我是內容 我是內容 我是內容
我是內容 我是內容 我是內容 我是內容
</div
</div>
</body>
</html>