jQuery動畫animate方法使用介紹_jquery

複製程式碼如下程式碼：

$(function() {
$(">
$(function() {
$("#left" ).click(function(){
$(".block").show();
$(".block").animate({
寬度: " 200px",
高度: " 200px",
fontSize: "1em",
borderWidth: 10
}, "慢","擺動")
$("#right"); .click(function() {
$(".block").show();
$(".block").animate({
寬度: "-200px",
高度：“-200px”，
fontSize：“10em”，
}，“慢”，“擺動”）
/*
$（“p”）。 animate({
高度: '200px', 不透明度: '切換'
}, "慢");
$("p").animate({
左: 50, 不透明度: ' show'
}, 500) */
//先漸隱
$("p").animate({
opacity: 'toggle'
}, "slow", "swing");
//後顯示
$("p").animate({
opacity: 'show'
}, 500,function() {alert('載入完成' ); });
});
腳本>
頭>

向右移動 向左移動 button>

張梓宇測試

傳回值:jQueryanimate(params, [duration], [easing], [ callback])
概述
用來建立自訂動畫的函數。如「height」、「頂」或「opacity」）。
而每個屬性的值表示該樣式屬性到多少時動畫結束。如果是數值，樣式屬性就會從目前的值漸變到指定的值。如果使用的是「隱藏」、「顯示」或「toggle」這樣的字串值，底部為該屬性呼叫預設的動畫形式。
在 jQuery 1.2 中，你可以使用 em 和 % 。另外，在 jQuery 1.2 中，你可以透過在前面的屬性值指定 " = " 或 "-= " 來讓元素做相對運動。
jQuery 1.3 中，如果duration設為0則直接完成動畫。而在先前版本中底部執行預設動畫。
參數
paramsOptions 一組包含作為動畫屬性和最終值的樣式屬性及其值的集合
duration (任選)String,Number 決定速度之一的字串("slow", "normal ", or “fast”）或表示動畫長度的數千分值（如：1000）
easing (任選)String 要使用拖曳效果的名稱（需要插件支援）。預設 jQuery 提供“線性”和“搖擺”。
callback (選擇性)Function 在動畫完成時執行的函數
範例
描述:
點擊按鈕後div 元素的幾個不同屬性同時變化
HTML 程式碼:

複製程式碼如下程式碼：

//在一個動畫中同時套用清晰類型的效果
$ ("#go").click(function(){
$("#block").animate({
寬度: "90%",
高度: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 )
});

說明：
讓指定元素左右移動
HTML 程式碼：

複製程式碼 程式碼如下：

$("#right").click(function( ){
$(".block").animate({left: ' 50px'}, "slow ");
});
$("#left").click(function() {
$(".block").animate({left: '-50px'}, "slow");
});

描述：
在600毫秒內切換段落的高度和透明度
jQuery代碼：

複製代碼 代碼如下：

$("p").animate({
height: 'toggle', opacity: 'toggle'
}, "slow" ）；

描述：
用500 毫秒將段落移到左為50 出來的位置並完全響亮顯示（透明度為1）
jQuery 代碼：

複製代碼複製代碼

複製代碼

複製代碼

複製代碼複製代碼

代碼如下： $("p").animate({ left: 50, opacity: '顯示'}, 500); 描述：一個使用「easein」函數提供不同動畫樣式的範例。只使用了插件來提供這個“easein”函數，這個參數才調度。 jQuery 程式碼: 複製程式碼程式碼如下：

$("p").animate({
opacity: 'show'
}, "slow", "easein");