jquery中動態效果

才智咖 人氣:2.34W

動畫效果,如果綜合使用,還能使用簡單的程式碼簡單實現jquery的各種外掛的效果

jquery中動態效果

本文參考《《淺談jquery》一書,加以整理,並結合自己的實際經驗而成,可以看做一個 學習手冊吧

編輯的時候程式碼全亂了,重新整理了下,可能程式碼格式還是有點亂,請見諒

顯示(show),隱藏(hide)與組合(toggle)效果

(speed,callback);

說明:這個方法可以顯示隱藏的元素,其中引數也預設,即寫成show()這種形式

speed ---指定顯示的速度 有3個引數可以選擇 slow ,normal,fast,也可以自己指定數字(單位:毫秒)

callback---回撥函式

下面是一個簡單的例子

複製程式碼 程式碼如下:

var callback=function(){ //alert("我是回撥函式");

}

var f1=function(){

// $("#t1")(); 引數預設

// $("#t1")("fast",callback); 顯示速度為fast方式

$("#t1")(3000,callback);//自定義顯示速度 3000毫秒

};

$("#b1")k(f1);

Html程式碼

複製程式碼 程式碼如下:

dd

2 hidden(speed,callback);

說明:相反與show方法,用於隱藏元素,引數與show相同,請參考3.1

下面的例子是點選一個按鈕,隱藏顯示的div

複製程式碼 程式碼如下:

var callback=function(){ //alert("我是回撥函式");

}

var f1=function(){

// $("#t1")(); 引數預設

// $("#t1")("fast",callback); 顯示速度為fast方式

$("#t1")(3000,callback);//自定義顯示速度 3000毫秒

}; $("#b1")k(f1);

Html程式碼

複製程式碼 程式碼如下:

dd

3 toggle(speed,callback)

說明:這個可以理解為show()與hide()方法的結合體,輪換執行show()與hide()

比如:頁面有一個隱藏的元素,第一次執行toggle(),顯示元素,第二次執行,隱藏元素,第三次則又顯示元素。。。

引數與3.1,相同

複製程式碼 程式碼如下:

var callback=function(){ //alert("我是回撥函式");

}

var f1=function(){

//$("#t1")le(); // 引數預設

//$("#t1")le("fast",callback); //顯示速度為fast方式

$("#t1")le(3000,callback);

};

$("#b1")k(f1);

Html程式碼

複製程式碼 程式碼如下:

dd

二.元素的滑動效果(向下展開,向上收縮)

eDown(speed,[callback]);

說明:改變物件的height以實現向下展開的動畫效果,常用與顯示隱藏的元素

複製程式碼 程式碼如下:

var callback=function(){ //alert("我是回撥函式"); }

var f1=function(){

//$("#t1")eDown(); // 引數預設

//$("#t1")eDown("fast",callback); //顯示速度為fast方式

$("#t1")eDown(1000,callback);

};

$("#b1")k(f1);

Html程式碼

複製程式碼 程式碼如下:

dd

eUp(speed,[callback]););

說明:改變物件的height以實現向上展開的動畫效果,常用隱藏顯示的元素

複製程式碼 程式碼如下:

var callback=function(){

//alert("我是回撥函式");

}

var f1=function(){

//$("#t1")eUp();

// 引數預設 //$("#t1")eUp("fast",callback); //顯示速度為fast方式

$("#t1")eUp(1000,callback);

};

$("#b1")k(f1);

dd

eToggle(speed,[callback]););

說明:可以說是以上2個方法的綜合體,可替代toggle();如果你是仔細看了上面的幾個方法介紹,就應該知道怎麼用了,其實這幾個方法的用法和引數都是相同的,只是展現的形式不同,例子我就不寫了吧

三 元素的淡入淡出效果

In(speed,[callback]);

說明:實現淡出效果,用於顯示隱藏元素

Out(speed,[callback]);

說明:實現淡入效果,用於隱藏顯示的.元素

3,fadeTo(speed,opactity,callback);

說明:該方法用於更改顯示元素的透明度

引數:speed,callback於上面介紹的其他動畫方法引數相同,opactity引數表示透明度,取值範圍為0-1

複製程式碼 程式碼如下:

var callback=function(){

//alert("我是回撥函式");

} ;

var f1=function(){ $("#t1")To(1000,0.3,callback);//0.3為透明度30%

};

$("#b1")k(f1);

dd

四.自定義動畫

說明:從前面一,二,三可以看到,元素的顯示有show,slideDown,fadeIn,隱藏有hide,slideUp,fadeOut的動畫效果

,組合效果toggle,slideToggle,更改透明度效果fadeTo,實際需要中我們還可以自定義一些動畫效果

自定義動畫使用方法:animate(params,speed,callback);

引數說明:params---一組包含作為動畫屬性和最終值哦樣式屬性和其值的集合

speed----同前面介紹方法中的speed屬性

callback---回撥函式

注意:params的樣式屬性必須書寫成駝峰形式,即比如margin-left應該些微marginLeft的形式

下面是一個例子

複製程式碼 程式碼如下:

var callback=function(){

//alert("我是回撥函式");

} ;

var par={ height:"70%" };

var f1=function(){

$("#t1")ate(par,1000,callback);

};

$("#b1")k(f1);

Html程式碼

複製程式碼 程式碼如下:

dd