2 - jQuery動畫

一、顯示/隱藏 ? ? ?使用 toggle() 方法來切換 hide() 和 show() 方法

語法:$(selector).toggle(speed,callback);

-> 可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度,可以取以下值:"slow"、"fast" 或毫秒

-> 可選的 callback 參數(shù)是 toggle() 方法完成后所執(zhí)行的函數(shù)名稱

例子:

$("button").click(function(){

$("p").toggle();

});


二、jQuery Fading方法實現(xiàn)淡入淡出

1、jQuery fadeIn() ? ? ? ? ? // 淡入已隱藏的元素

2、jQuery fadeOut() ? ? ? // 淡出可見元素

3、jQuery fadeToggle() ?// 淡入和淡出

4、jQuery fadeTo() ? ? ? ? //更改透明度

例子:

$("button").click(function(){

$("#div1").fadeTo("slow",0.15);

$("#div2").fadeToggle("slow");

$("#div3").fadeOut(3000);

});


三、jQuery 滑動方法

1、slideDown() 方法用于向下滑動元素

2、slideUp() 方法用于向上滑動元素

3、slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進(jìn)行切換

例子:

$("#flip").click(function(){

$("#panel").slideToggle("slow");

});


四、jQuery 動畫

1、jQuery animate() 方法用于創(chuàng)建自定義動畫

語法:$(selector).animate({params},speed,callback);

-> 必需的 params 參數(shù)定義形成動畫的 CSS 屬性

-> 可選的 speed 參數(shù)規(guī)定效果的時長,可取以下值:"slow"、"fast" 或毫秒

-> 可選的 callback 參數(shù)是動畫完成后所執(zhí)行的函數(shù)名稱

例子:

/* 可以把屬性的動畫值設(shè)置為預(yù)設(shè)值: "show"、"hide" 或 "toggle" */

$("button").click(function(){

//把<div>元素往右邊移動了 200 像素

$("div").animate({left:'200px'});

});

or ?使用隊列:

$("button").click(function(){

var div=$("div");

div.animate({height:'100px',opacity:'0.2'},"slow");

div.animate({width:'100px',opacity:'0.8'},"slow");

});

2、jQuery stop() 方法用于停止動畫或效果,在它們完成之前

stop() 方法適用于所有 jQuery 效果函數(shù),包括滑動、淡入淡出和自定義動畫

語法:$(selector).stop(stopAll,goToEnd);

-> 可選的 stopAll 參數(shù)規(guī)定是否應(yīng)該清除動畫隊列。默認(rèn)是 false,即僅停止活動的動畫,允許任何排入隊列的動畫向后執(zhí)行。

-> 可選的 goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動畫。默認(rèn)是 false。


五、jQuery Callback ?動畫完成后調(diào)用的方法

$("button").click(function(){

$("div1").hide("slow",function(){

alert("段落現(xiàn)在被隱藏了");

});

});


六、jQuery ?Chaining ?方法鏈接

例子:

$("button").click(function(){

$("#div1").css("color","red").slideUp(500).slideDown(1000);

});

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 通過jQuery,您可以選取(查詢,query)HTML元素,并對它們執(zhí)行“操作”(actions)。 jQuer...
    枇杷樹8824閱讀 670評論 0 3
  • jQuery 安裝 把 jQuery 添加到您的網(wǎng)頁 如需使用 jQuery,您需要下載 jQuery 庫(會在下...
    Clover園閱讀 301評論 0 0
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計者無需花費時間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,200評論 0 1
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計者無需花費時間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,372評論 0 2
  • //------------------------- 第一章 認(rèn)識JQuery ----------------...
    米塔塔閱讀 747評論 0 9