- jQuery 隱藏與顯示
- jQuery 淡入淡出
- jQuery 滑動
- jQuery 動畫
- jQuery 停止動畫
- jQuery Callback
- jQuery Chaining
jQuery 隱藏與顯示
兩個簡單的很炫效果：
隱藏與顯示動畫1.gif
代碼：
<p>你好嗎</p>
<button id="hide">隱藏</button>
<button id="show">顯示</button>
<button id="toggle">隱藏/顯示</button>
$(document).ready(function () {
$("#hide").click(function () {
$("p").hide(1000);
}) ;
$("#show").click(function () {
$("p").show(1000);//1000毫秒
}) ;
$("#toggle").click(function () {
$("p").toggle(1000);//同時控制顯示與隱藏
}) ;
});
隱藏與顯示動畫2.gif
代碼：
<body>
<p>你好嗎</p>
</button>-->
<script>
for(var i = 0 ; i <5;i++){
$("<div>").appendTo(document.body);
}
$("div").click(function () {
$(this).hide(2000,function () {
$(this).remove();//隱藏后移除掉div
});
});
</script>
jQuery 淡入淡出
首先看效果圖：
淡入淡出效果.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<script src="fadeInOut.js"></script>
</head>
<body>
<button id="in">淡入</button>
<button id="out">淡出</button>
<button id="toggle">淡入/淡出</button>
<button id="to">fadeto</button>
<div id="div1" style="display: none; width: 80px;height: 80px;background-color: aqua"></div>
<div id="div2" style="display: none; width: 80px;height: 80px;background-color: sienna"></div>
<div id="div3" style="display: none; width: 80px;height: 80px;background-color: fuchsia"></div>
</body>
</html>
/**
* Created by chuanglong02 on 17/1/24.
*/
$(document).ready(function () {
$("#in").click(function () {
$("#div1").fadeIn(1000);
$("#div2").fadeIn(1000);
$("#div3").fadeIn(1000);
});
$("#out").click(function () {
$("#div1").fadeOut(1000);
$("#div2").fadeOut(1000);
$("#div3").fadeOut(1000);
});
$("#toggle").click(function () {
$("#div1").fadeToggle(1000);
$("#div2").fadeToggle(1000);
$("#div3").fadeToggle(1000);
});
$("#to").click(function () {
$("#div1").fadeTo(1000,1);
$("#div2").fadeTo(1000,0.75);
$("#div3").fadeTo(1000,0.3);//設置透明度
});
});
jQuery 滑動 ,和上面顯示隱藏是一樣的
效果圖：
滑動顯示與隱藏.gif
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<script src="slide.js"></script>
<style>
#flipshow,#content,#fliphide,#flip{
padding: 5px;
text-align: center;
background-color: #ece023;
border: 1px solid red;
}
#content{
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flipshow">顯示</div>
<div id="fliphide">隱藏</div>
<div id="flip">顯示/隱藏</div>
<div id="content">helloword</div>
</body>
</html>
$(document).ready(function () {
$("#flipshow").click(function () {
$("#content").slideDown(1000);
});
$("#fliphide").click(function () {
$("#content").slideUp(1000);
});
$("#flip").click(function () {
$("#content").slideToggle(1000);
});
});
回調 callback
動畫在結束后都有個回調，可以執行一個或者多個方法:
效果圖：
動畫回調.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<script src="callbakc.js"></script>
</head>
<body>
<button>隱藏</button>
<p>hello Worldhello Worldhello World</p>
</body>
</html>
$(document).ready(function () {
$("button").click(function () {
$("p").hide(1000,function () {
// $("p").show(); //回調 ，動畫執行之后的回調
$("p").css("color","red").slideUp(1000).slideDown(1000);
});
});
});
