聊聊使用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，則清空隊列。可以立即結束動畫。 ######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如何實現動畫（程式碼詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！