JQuery的動畫及其幻燈片效果

2022-08-03 05:18:13 字數 2561 閱讀 2413

1.顯示和隱藏hide()和show()

對於動畫來說,顯示和隱藏是最基本的效果之一,簡單介紹jquery的顯示和隱藏。

點選按鈕,看看效果

本節主要降級和學習jquery的自動顯隱,漸入漸出、飛入飛出。自定義動畫等。 1.顯示和隱藏hide()和show() 對於動畫來說,顯示和隱藏是最基本的效果之一,本節簡單介紹jquery的顯示和隱藏。

以上是對hide()和show()函式的測試。

2.使用show()、hide()和toggle()方法

上個例子對show()和hide()方法做了簡單介紹,其實這兩個方法可以接受引數控制顯隱藏過程。

語法如下

show(duration,[callback]);

hide(duration,[callback]);

其中,duration表示動畫執行時間的長短,可以表示速度的字串,包括slow(0.6秒),normal(0.4秒),fast(0.2秒).也可以是表示時間的整數(毫秒)。callback是可選的**函式。在動畫完成之後執行

例子和第乙個例子相同,只是對hide()和show()增加了時間引數。其實toogle()也可以加入事件引數。

如果直接呼叫toogle() 也可以實現顯示和隱藏

$(function () , function () );

});

3.使用fadein()和fadeout()方式

對於動畫效果顯隱,jquery還提供了fadein()個fadeout()這兩個實用的方法,他們的動畫效果類似褪色,語法與show()和hide()完全相同。

fadein(duration, [callback]);

fadeout(duration, [callback]);

例子

fadeto()方法的使用。

fadeto() 方法將被選元素的不透明度逐漸地改變為指定的值。

例子:

fadeout相關引數

speed 

可選。規定元素從當前透明度到指定透明度的速度。

可能的值:

毫秒 (比如 1500)

"slow"

"normal"

"fast"

opacity 必需。規定要淡入或淡出的透明度。必須是介於 0.00 與 1.00 之間的數字。

callback 

可選。fadeto 函式執行完之後,要執行的函式。

除非設定了 speed 引數,否則不能設定該引數。

4.幻燈片slideup和slidedown效果

5.自定義動畫

考慮到框架的通用性及**檔案的大小,jquery不能涵蓋所有的動畫效果,但它提供了animate()方法,能夠使開發者自定義動畫。本節主要通過介紹animate()方法的兩種形式及應用。

animate()方法給開發者很大的空間。它一共有兩種形式。第一種形式比較常用。用法如下

animate(params,[duration],[easing],[callback])

其中params為希望進行變幻的css屬性列表,以及希望變化到的最終值,duration為可選項,與show()/hide()的引數含義完全相同。easing為可選引數,通常供動畫外掛程式使用。 用來控制節奏的變化過程。jquery中只提供了linear和swing兩個值.callback為可選的**函式。在動畫完成後觸發。

需要注意。params中的變數遵循camel命名方式。例如paddingleft不能寫成padding-left.另外,params只能是css中用數值表示的屬性。例如width.top.opacity等

像backgroundcolor這樣的屬性不被animate支援。

go>>

動畫!

在params中,jquery還可以用「+=」或者"-="來表示相對變化。如

go>>

go>>

動畫!

先將div進行絕對定位,然後使用animate()中的-=和+=分別實現相對左移和相對右移。

animate()方法還有另外一種形式,如下所示:

animate(params,options)

其中,params與第一種形式完全相同,options為動畫可選引數列表,主要包括duration,esaing,callback,queue等,其中duration.easing.callback與第一種形式完全一樣,queue為布林值,表示當有多個 animate()組成jquery時,當前animate()緊接這下乙個animate(),是按順序執行(true)還是同時觸發false

如下例子,展示了animate()第二種用法。

block1

block2

以上兩個div塊同時運用了三個動畫效果,其中第乙個div快的第乙個動畫新增了queue:false引數,使得前兩項兩個動畫同時執行。

Jquery簡單幻燈片

看了許多jquery的幻燈片,自己也想學著弄乙個,簡單是簡單了一點。不過研究過,還是比較安慰的啦,以下 並未在生產環境中使用過,如果您要在生產環境中使用,請慎重 slide frameid,framewidth,frameheight,ulid,isshow,intervaltime 外層物件id,...

jquery 幻燈片效果

閒著無聊,用jquery寫了乙個幻燈片效果。我這人喜歡造輪子,除了jquery這種有強大開發團隊的框架級別js,其實的一些小程式都是盡量自己寫。一是因為怕出問題了沒人問,二是自己寫的改起來也方便。效果可參考 只是上面這個demo用的是supersized,功能比較強大,就是 加密過了,讀起來很困難。...

jquery幻燈片 漸變

上為了設計,需要一些幻燈片效果,現在 有很多外掛程式可以使用。想要成為以為牛逼的程式設計師,絕對不允許只會用別人的外掛程式而已,不然你只能是 的搬運工,而不敢做出自己的創新。首先使用jquery做漸變效果,一般使用fadeout fadein 漸入漸出 效果。但是因為fadeout fadein在停...