站長資訊網使用jQuery如何實現動畫？下面本篇文章給大家介紹一些jQuery實現預定義動畫或自定義動畫的方法，希望對大家有所幫助！
預定義動畫
顯示與隱藏
show() 方法和 hide() 方法是 jQuery 中最基本的動畫方法。具體語法如下:
$element.show([speed],[easing],[fn]); $element.hide([speed],[easing],[fn]);
- speed : 三種預定速度之一的字符串 (“slow”、“normal”或者“fast”) 或表示動畫時長的毫秒數值。
- easing : 用來指定切換效果，默認是 “swing”，可用參數 “linear ”。
- fn : 在動畫完成時執行的函數，每個元素執行一次。
/* 顯示與隱藏 1.無動畫版本 * show()- 顯示 * hide() - 隱藏 2.有動畫版本 - 同時改變寬度和高度 * show (speed,callback) * speed - 動畫執行的時長,單位為毫秒 * callback - 動畫執行完畢后的回調函數 * hide (speed, callback) * speed - 動畫執行的時長,單位為毫秒 * callback - 動畫執行完畢后的回調函數 */ $('#box').hide(2000,function(){ $('#box').show(2000); });
滑動式動畫
slidelUp() 方法和 slideDown() 方法通過改變高度值實現動畫效果。具體語法如下:
$element.slideUp([speed],[easing],[fn]); $element.slideDown([speed],[easing],[fn]);
- speed : 三種預定速度之一的字符串 (“slow”、“normal”或者“fast”) 或表示動畫時長的毫秒數值。
- easing : 用來指定切換效果，默認是“swing”，可用參數“linear ”。
- fn : 在動畫完成時執行的函數，每個元素執行一次。
/* 滑動式動畫 - slideup()和slideDown() * 注意 - 沒有無動畫版本(底層代碼預定義動畫執行的時長) * 效果 - 改變指定元素的高度 */ $('#box').slideUp(3000); $('#box').slideDown(3000);
淡入淡出效果
fadeln() 方法和 fadeOut() 方法通過改變透明度實現動畫效果。具體語法如下:
$element.fadeln([speed],[easing],[fn]); $element.fadeOut([speed],[easing],[fn]);
- speed : 三種預定速度之一的字符串 (“slow”、“normal”或者“fast”) 或表示動畫時長的毫秒數值。
- easing : 用來指定切換效果，默認是“swing”，可用參數“linear ”。
- fn : 在動畫完成時執行的函數，每個元素執行一次。
// 改變元素的透明度 $('#box').fadeOut(3000); $('#box').fadeIn(3000);
動畫切換效果
jQuery 除了提供了三種預定義動畫效果之外，還提供三組動畫切換效果:
toggle([speed], [easing] [, fn] )方法 : 如果元素是可見的，切換為隱藏的;如果元素是隱藏的，切換為可見的。slideToggle([speed], [easing] [, fn]) 方法 : 通過高度變化來切換所有匹配元素的可見性，并在切換完成后可選地觸發一個回調函數。fadeToggle([speed], [easing] [, fn]) 方法 : 通過不透明度的變化來開關所有匹配元素的淡入和淡出效果，并在動畫完成后可選地觸發一個回調函數。
$('#btn').click(function(){ // $('#box').toggle(3000); // $('#box').slideToggle(3000); $('#box').fadeToggle(3000) })
具有局限性
自定義動畫
animate()方法
jQuery 提供了 anirmate() 方法完成自定義動畫效果，該方法具有兩種用法:
$element.animate(properties,duration,easing,complete)
- properties : 一個CSS屬性和值的對象,動畫將根據這組對象移動。
- duration : 一個字符串或者數字決定動畫將運行多久。
- easing : 一個字符串，表示過渡使用哪種緩動函數。
- cormplete : 在動畫完成時執行的回調函數。
/* animate()方法–自定義動畫方法 1.animate(properties,duration，callback) * properties - 表示cSS的樣式屬性 * 設置動畫執行結束的樣式屬性值 * duration - 表示動畫執行的時長，單位為亳秒 * callback - 表示動畫執行完畢后的回調函數 2.animate(properties,options) * properties - 表示cSS的樣式屬性 * 設置動畫執行結束的樣式屬性值 * options - 表示設置動畫的相關參數 * speed - 表示動畫執行的時長,單位為毫秒 * comalete - 表示動畫執行完畢后的回調函數 * queue - 布爾值,設置是否添加到動畫隊列中 */ /* $('#box').animate({ width : 100, height : 100 },3000); */ $('#box').animate({ width : 100, height : 100, left : 100 },{ speed : 3000 });
通過 animate() 方法實現動畫效果，但不支持以下 CSS 樣式屬性:
backgroundColorborderBottonColor.borderLeftColorborderRightColorborderTopColorColoroutlineColor
并發與排隊效果
并發效果 : 指的就是多個動畫效果同時執行。
$("#panel").click(function(){ $(this).animate({ left: "500px", height:"200px" }, 3000); };
排隊效果 : 指的就是多個動畫按照先后順序執行。
$("#panel").click(function(){ $(this).animate({ left: "500px"},3000) .animate({ height: "200px" }, 3000); });
queue : 用于控制當前的動畫效果是并發還是排隊效果:
/* queue - 用于控制當前的動畫效果是并發還是排隊效果 * 參數 * false - 并發 * true - 排隊 */ $('#box').animate({ left : 300 },{ duration : 3000 }).animate({ top : 300 },{ duration : 3000, queue : true });
停止動畫效果
jQuery 提供了 stop() 方法用于停止所有在指定元素上正在運行的動畫，具體語法如下:
$element.animate([clearQueue][, gotoEnd]);
clearQueue : 如果設置成 true，則清空隊列。可以立即結束動畫。
gotoEnd : 讓當前正在執行的動畫立即完成，并且重設 show 和 hide 的原始樣式，調用回調函數等
$('#stort').click(function(){ $('#box').animate({ left : 600 },3000).animate({ top : 200 },3000) }); $('#stop').click(function(){ /* * stop()方法沒有接收任何參數時 - 立即停止執行動畫 * stop(queue)方法的第一個參數 * false - 表示停止當前動畫,但隊列中的動畫繼續執行 * true - 表示停止當前動畫,并且清空動畫隊列 * stop (queue,gotoEnd)方法的第二個參數 * false - 不會做任何處理 * true - 表示停止當前動畫，并且將指定元素設置為動畫執行完畢后的樣式 */ $('#box').stop(true,true); });
延遲執行動畫
jQuery 提供了 delay() 方法用于設置一個延時來推遲執行隊列中之后的項目，具體語法如下:
$element.delay(duration, queueName]);
duration : 延時時間，單位為毫秒。
queueName : 隊列名詞，默認是Ex，動畫隊列。
$('#box').animate({ left : 600 },3000).delay(1000).animate({ top : 200 },3000);
相關視頻教程推薦：jQuery視頻教程
