使用jQuery怎么實現動畫

小編今天帶大家了解使用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 樣式屬性:

• backgroundColor

• borderBottonColor.

• borderLeftColor

• borderRightColor

• borderTopColor

• Color

• outlineColor

并發與排隊效果

并發效果 : 指的就是多個動畫效果同時執行。

$("#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，則清空隊列?？梢粤⒓唇Y束動畫。

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是什么

jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發網站。

感謝大家的閱讀，以上就是“使用jQuery怎么實現動畫”的全部內容了，學會的朋友趕緊操作起來吧。相信億速云小編一定會給大家帶來更優質的文章。謝謝大家對億速云網站的支持！