jQuery 動畫效果
阿新 • • 發佈：2020-08-24
show&hide
左上角的漸變進行顯示和隱藏。
引數1：動畫秒數
引數2：回撥函式，用於動畫執行完畢後的反饋操作
注意：當元素隱藏後，是不佔據文件流空間位置的。同級排在之後的元素會進行跟進補白
其實底層是設定
display:hidden或移除display屬性，並新增一些動畫所實現的
<body> <div style="width: 200px;height: 200px;background-color: red;"></div> <p><button type="button" style="display: block;">slideUp</button></p> <p><button type="button" style="display: block;">slideDown</button></p> </body> <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script> <script> $(() => { $("button:first").on("click", function (ev) { $("div").hide(3000,function () { $("button:first").text("已隱藏"); }); }) $("button:last").on("click", function (ev) { $("div").show(3000,function () { $("button:first").text("hide"); $("button:last").text("已顯示"); }); }) }) </script>
slideDown&slideUp
自下而上的漸變進行顯示和隱藏。
引數1：動畫秒數
引數2：回撥函式，用於動畫執行完畢後的反饋操作
注意：當元素隱藏後，是不佔據文件流空間位置的。同級排在之後的元素會進行跟進補白
其實底層是設定
display:hidden或移除display屬性，並新增一些動畫所實現的
<body> <div style="width: 200px;height: 200px;background-color: red;"></div> <p><button type="button" style="display: block;">slideUp</button></p> <p><button type="button" style="display: block;">slideDown</button></p> </body> <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script> <script> $(() => { $("button:first").on("click", function (ev) { $("div").slideUp(3000,function () { $("button:first").text("已隱藏"); }); }) $("button:last").on("click", function (ev) { $("div").slideDown(3000,function () { $("button:first").text("hide"); $("button:last").text("已顯示"); }); }) }) </script>
slideToggle
如果已隱藏，就顯示，如果已顯示，就隱藏。
引數1：動畫秒數
引數2：回撥函式，用於動畫執行完畢後的反饋操作
注意：當元素隱藏後，是不佔據文件流空間位置的。同級排在之後的元素會進行跟進補白
其實底層是設定
display:hidden或移除display屬性，並新增一些動畫所實現的
<body> <div style="width: 200px;height: 200px;background-color: red;"></div> <p><button type="button" style="display: block;">slideToggle-已顯示</button></p> </body> <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script> <script> $(() => { $("button:first").on("click", function (ev) { $("div").slideToggle(3000, function () { if ($("button:first").text().indexOf("已顯示") > 1) { $("button:first").text("slideToggle-已隱藏") }else{ $("button:first").text("slideToggle-已顯示") } }); }) }) </script>
fadeIn&fadeOut
原位置單純的透明度的改變
引數1：動畫秒數
引數2：回撥函式，用於動畫執行完畢後的反饋操作
注意：當元素隱藏後，是不佔據文件流空間位置的。同級排在之後的元素會進行跟進補白
其實底層是判斷
display是不是hidden，並新增一些動畫所實現的
<body>
<div style="width: 200px;height: 200px;background-color: red;"></div>
<p><button type="button" style="display: block;">fadeOut</button></p>
<p><button type="button" style="display: block;">fadeIn</button></p>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
$(() => {
$("button:first").on("click", function (ev) {
$("div").fadeOut(3000,function () {
$("button:first").text("已隱藏");
});
})
$("button:last").on("click", function (ev) {
$("div").fadeIn(3000,function () {
$("button:first").text("hide");
$("button:last").text("已顯示");
});
})
})
</script>
fadeToggle()
如果已隱藏，就顯示，如果已顯示，就隱藏。
引數1：動畫秒數
引數2：回撥函式，用於動畫執行完畢後的反饋操作
注意：當元素隱藏後，是不佔據文件流空間位置的。同級排在之後的元素會進行跟進補白
其實底層是設定
display:hidden或移除display屬性，並新增一些動畫所實現的
<body>
<div style="width: 200px;height: 200px;background-color: red;"></div>
<p><button type="button" style="display: block;">fadeToggle-已顯示</button></p>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
$(() => {
$("button:first").on("click", function (ev) {
$("div").fadeToggle(3000, function () {
if ($("button:first").text().indexOf("已顯示") > 1) {
$("button:first").text("slideToggle-已隱藏")
}else{
$("button:first").text("slideToggle-已顯示")
}
});
})
})
</script>
fadeTo()
可指定元素透明度
引數1：動畫秒數
引數2：透明度
引數3：回撥函式，用於動畫執行完畢後的反饋操作
底層其實就是控制
opacity的值實現的
<body>
<div style="width: 200px;height: 200px;background-color: red;"></div>
<p><button type="button" style="display: block;">fadeTo .3</button></p>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
$(() => {
$("button:first").on("click", function (ev) {
if ($("div").css("opacity") == "0.3") {
$("div").fadeTo(3000, .7, function () {
$("button:first").text("fadeTo .7");
});
} else {
$("div").fadeTo(3000, .3, function () {
$("button:first").text("fadeTo .7");
});
}
})
})
</script>
animate()
可設定自定義動畫
引數1：自定義動畫的
CSS引數2：執行秒數
引數3：回撥函式
以下示例將展示點選按鈕後讓<div>發生自定義變化。
<body>
<main style="width: 200px;height: 200px;border: 1px solid #ddd;">
<div style="width: 50px;height: 50px;background-color: red;"></div>
</main>
<p><button type="button" style="display: block;">面積改變</button></p>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
$(() => {
$("button").on("click", function (ev) {
let n1 = Math.floor(Math.random() * (254 + 1));
let n2 = Math.floor(Math.random() * (254 + 1));
let n3 = Math.floor(Math.random() * (254 + 1));
$("div").animate(
{
width: "100%",
height: "100%",
borderWidth: 10
}, 1000);
});
})
</script>