jQuery(七)——jQuery 動畫
阿新 • • 發佈：2021-02-17
技術標籤：JavaWebjsjqueryjavascripthtmlcss
2. jQuery 動畫
基本動畫
- show() 將隱藏的元素顯示
- hide() 將可見的元素隱藏。
- toggle() 可見就隱藏，不可見就顯示。 切換
淡入淡出動畫
- fadeIn() 淡入（慢慢可見）
- fadeOut() 淡出（慢慢消失）
- fadeToggle() 淡入/淡出。 切換
- fadeTo() 在指定時長內慢慢的將透明度修改到指定的值。0 透明，1 完成可見，0.5 半透明
以上動畫方法除了7外，都有兩個引數，可以新增一個、兩個，也可以不新增。
- 第一個引數是動畫 執行的時長，以毫秒為單位
- 第二個引數是動畫的回撥函式 (動畫完成後自動呼叫的函式)
$("#div1").show( 2000 , function () { alert("show動畫完成 ") } );
方法7 有三個引數：0 透明，1 完成可見，0.5 半透明 。
$("#btn7").click(function(){ $("#div1").fadeTo( 2000 , 0.5 ,function () { alert('fadeTo完成 ') });
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
< 介面效果：
舉例測試：
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//1.顯示 show()
$("#btn1").click(function () {
//$("#div1").show();
//$("#div1").show(2000);
$("#div1").show(2000,function () {
alert("show動畫完成 ")
}); //後面的2 3 4 5 6都可以有這三種呼叫形式
});
//2.隱藏 hide()
$("#btn2").click(function () {
$("#div1").hide(1000,function () {
alert("hide動畫 執行完成 ")
});
});
//3.切換 toggle()
$("#btn3").click(function () {
$("#div1").toggle(1000,function () {
alert("toggle動畫 完成 ")
});
});
//4.淡入 fadeIn()
$("#btn4").click(function(){
$("#div1").fadeIn(2000,function () {
alert("fadeIn完成 ")
});
});
//5.淡出 fadeOut()
$("#btn5").click(function(){
$("#div1").fadeOut(2000,function () {
alert("fadeOut完成 ")
});
});
//6.淡化切換 fadeToggle()
$("#btn6").click(function(){
$("#div1").fadeToggle(1000,function () {
alert("fadeToggle完成 ")
});
});
//7.淡化到 fadeTo()
$("#btn7").click(function(){
$("#div1").fadeTo(2000,0.5,function () {
alert('fadeTo完成 ')
});
});
});
</script>
關於toggle切換函式，可以不斷切換以實現動畫效果：
實現不斷切換的方法就是當執行完後就再次自己呼叫自己。
<script type="text/javascript">
$(function () {
var dynamicMov = function () {
$("#div1").toggle(1000,dynamicMov); //寫dynamicMov() 錯
} 自己不斷呼叫自己
dynamicMov();
</script>