jQuery動畫效果實現
目錄
jQuery動畫效果說明
在JS當中,為了實現動畫效果我們往往需要各種的宣告,呼叫,迴圈,遍歷,無所不用其極.往往敲完一個簡單的效果,時間已經過了幾十分鐘甚至幾個小時.而當你使用了jQuery庫之後,程式碼量可以大大縮減,減少Coder敲程式碼的時間,並且保證功能的完美實現.
今天我簡單的介紹一下使用jQuery庫實現JS動畫效果
方法如下:
- 顯示和隱藏
- 展開和收起
- 淡入和淡出
- 自定義動畫
顯示和隱藏動畫
在原生程式碼中,我們常需要使用display來設定標籤內容的顯示與隱藏,而在jQuery中,我們可以直接使用專門的方法實現效果.
顯示和隱藏動畫方法
- show();控制讓標籤顯示的動畫方法
- hide();控制讓標籤隱藏的動畫方法
- toggle();控制讓標籤顯示|隱藏效果切換的動畫方法
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } div{ width: 100px; height: 200px; background: red; } </style> <script src="js/jquery-3.3.1.js"></script> </head> <body> <div>div1</div> <button>顯示</button> <button>隱藏</button> <button>切換</button> <script> $(function () { //........ //顯示和隱藏動畫:本質就是操作標籤的樣式(寬度 | 高度 | 透明度) //jQ.show([speed],[fn]); //jQ.hide([speed],[fn]); //jQ.toggle([speed],[fn]); $("button:eq(0)").click(function () { //第一個引數:動畫執行的時間(速度) 單位是毫秒 1s = 1000ms //第二個引數:回撥函式(當動畫執行完畢的時候呼叫) //fast 0.2 //slow 0.6 $("div").show("fast",function () { console.log("動畫--end"); }); }) $("button:eq(1)").click(function () { //第一個引數:動畫執行的時間(速度) //第二個引數:回撥函式(當動畫執行完畢的時候呼叫) $("div").hide("slow",function () { console.log("動畫--end"); }); }); $("button:eq(2)").click(function () { //第一個引數:動畫執行的時間(速度) //第二個引數:回撥函式(當動畫執行完畢的時候呼叫) $("div").toggle(1000,function () { console.log("動畫--end"); }); }) }) </script> </body> </html>
顯示和隱藏動畫語法
$(' div ').show(speed,callBack)
$(' div ').hide(speed,callBack)
其中speed為可選引數,代表著執行動畫速度,單位為毫秒
可用系統預設值:“slow”、“normal”、“fast”,對應的速度分別為0.6秒、0.4秒和0.2秒。
callBack為可選引數,代表著動畫執行完之後的回撥函式.
$(' div ').toggle()
不傳遞引數,切換當前元素（標籤）的可見狀態，如果當前元素的狀態為不可見，則切換為可見，如果當前元素的狀態為可見，則切換為不可見。
$(' div ').toggle(speed,callBack)
第一個可選的引數為動畫執行的速度，第二個可選的引數為動畫執行完後執行的回撥函式。
show和hide的實現邏輯為同時改變標籤的width,height,以及opacity.
展開和收起動畫
展開和收起動畫,在顯示和隱藏的基礎上增加了動畫的滑動效果,這顯然看起來更coolllllll~
展開和收起動畫方法
- slideDown
- slideUp
- slideToggle
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div{
width: 50px;
height: 300px;
background-color: #f52;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div>1</div><br>
<div>2</div>
<button>展開</button>
<button>收起</button>
<button>切換</button>
<script>
$(function () {
//........
//展開和收起動畫:設定標籤的高度
//jQ.slideDown([speed],[fn]);
//jQ.slideUp([speed],[fn]);
//jQ.slideToggle([speed],[fn]);
$("button").first().click(function () {
$("div").slideDown(1000,function () {
console.log("--end--");
})
})
$("button").eq(1).click(function () {
$("div").slideUp(1000,function () {
console.log("--end--");
})
})
$("button").last().click(function () {
$("div").slideToggle(3000,function () {
console.log("--end--");
})
})
})
</script>
</body>
</html>展開和收起動畫語法
slideDown(speed，callBack) slideUp(speed，callBack) slideToggle(speed,callBack)
無論是展開還是收起,它們改變的僅僅只是標籤的高度
slideToggle 噹噹前標籤高度不為0時,將高度改為0,實現收起效果,如果為0,則實現展開效果.
三種語法的引數,第一個引數：動畫執行的時間，同show方法。
第二個引數：動畫執行完畢的回撥函式，可以省略，同show方法。
淡出和淡入動畫
其實就是改變了標籤的透明度,並不修改其他屬性
淡出和淡入動畫方法
- fadeIn
- fadeOut
- fadeToggle
- fadeTo
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div>div</div>
<button>淡入</button>
<button>淡出</button>
<button>淡入淡出到.</button>
<button>切換</button>
<script>
$(function () {
//........
//淡入淡出動畫:設定標籤的透明度(opacity)
//jQ.fadeIn([speed],[fn]);
//jQ.fadeOut([speed],[fn]);
//jQ.fadeToggle([speed],[fn]);
//jQ.fadeTo(speed,target,fn)
$("button:eq(0)").click(function () {
$("div").fadeIn(1000,function () {
console.log("---end---");
})
})
$("button:eq(1)").click(function () {
$("div").fadeOut(3000,function () {
console.log("---end---");
})
})
$("button:eq(2)").click(function () {
$("div").fadeTo(1000,0.5,function () {
console.log("---end---");
})
})
$("button:eq(3)").click(function () {
$("div").fadeToggle(1000,function () {
console.log("---end---");
})
})
})
</script>
</body>
</html>淡入和淡出動畫語法
fadeIn(speed，callBack); fadeOut(speed，callBack) fadeToggle(speed,callBack) fadeTo(speed,opactity，callBack)
fadeIn()方法的作用是淡入動畫，即改變標籤的透明度讓標籤慢慢的顯示出來。
fadeOut()方法的作用是淡出動畫，即改變標籤的透明度讓標籤慢慢的消失（透明度為0）。
fadeToggle()方法的作用是切換動畫，如果當前標籤的透明度不為0，那麼就執行淡出動畫，否則就執行淡入動畫。
fadeTo()方法的作用是淡入到，即使用動畫效果實現將標籤的透明度設定為指定的值。
透明度(opacity)的取值為:0.0~1.0
自定義動畫
自定義動畫為jQuery庫裡已經封裝好的控制寬高,透明度等相關功能的方法,jQuery為我們專門提供了一個animate()方法,以供我們自定義其動畫效果.
自定義動畫效果語法
animate(styles,speed,easing,callback)
其中
style為規定產生動畫效果的 CSS 樣式和值。
speed為速度,設定與show相同
easing為可選。規定在不同的動畫點中設定動畫速度的 easing 函式。
內建的 easing 函式：
swing
linear
callBack為回撥函式,這個你們都懂啦,就不再敘述了.
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div>div</div>
<button>執行動畫1</button>
<button>執行動畫2</button>
<button>執行動畫3</button>
<button>執行動畫4</button>
<script>
$(function () {
//........
//jQuery框架提供自定義動畫方法:animate
//語法:jQ.animate({},speed,fn)
$("button").eq(0).click(function () {
$("div").animate({
width:"300px",
height:"240px",
background:'blue'
},1000,function () {
console.log("---end--");
})
})
$("button").eq(1).click(function () {
$("div").animate({
width:"+=50px",
height:"+=50px"
},500,function () {
console.log("---end--");
})
})
$("button").eq(2).click(function () {
$("div").animate({
width:"500px",
height:"toggle"
},500,function () {
console.log("---end--");
})
})
$('button:eq(3)').click(function () {
$('div').animate({
width:'888px',
height:'toggle'
},500)
})
})
</script>
</body>
</html>對了,最後,如果你們拿案例程式碼去實現發現無效的時候,可以去看下是不是自己的jQuery和我的版本不同,嘻嘻~,之前我吃過這個虧,所以提一下~