首頁 > web前端 > js教程 > jQuery動畫animate方法使用介紹_jquery

jQuery動畫animate方法使用介紹_jquery

WBOY
發布: 2016-05-16 17:34:31
原創
1439 人瀏覽過
複製程式碼如下程式碼:

$(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('載入完成' ); });
});
腳本>
頭>


傳回值: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");
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板