jQuery動畫基礎篇

1.隱藏元素的hide方法囚巴,.hide(options)原在,當提供hide方法的參數(shù)時,.hide成為一個動畫方法彤叉,將匹配元素的高度庶柿,寬度,以及透明度秽浇,同時進行動畫操作浮庐。有快捷參數(shù).hide(fast/slow),分別代表著200和600毫秒的延時!注意柬焕!jQuery在使用hide時审残,是會保持本身元素的原始屬性值的,在之后通過對應的方法還原的時候還是初始值斑举!css中類似的方法有display:none
2.顯示元素show方法
$('elem').hide(3000).show(3000)
讓元素執(zhí)行3秒的隱藏動畫搅轿,然后執(zhí)行3秒的顯示動畫。show和hide修改是display屬性富玷,通過是visibility屬性布局需要通過Css方法單獨設置
3.toggle方法:用于切換顯示或隱藏匹配元素璧坟。沒有參數(shù)toggle(),沒有動畫赎懦。提供參數(shù)雀鹃,提供了時間,還有動畫的回調励两。該方法其實就是hide和show的相互切換
4.下拉動畫slideDown:常用操作
.slowDown([duration],[,complete])
具體使用:
$("ele").slowDown(1000,function(){ //等待動畫執(zhí)行一秒后黎茎,執(zhí)行別的動作 });
在使用該方法前,元素是先隱藏起來的伐蒋,可以設置display:none
5.上卷動畫slideUp:最簡單的使用就是不帶參數(shù)
$("elem").slideUp();
含義:找到元素的高度工三,然后采用一個下滑動畫讓元素一直滑到隱藏,修改元素display樣式屬性為none先鱼,這樣就可以確保這個元素不會影響頁面布局了
帶參數(shù)的用法
.slideUp([duration][,easing][,complete])
注意:因為動畫是異步的,所以在動畫執(zhí)行之后執(zhí)行某些操作就必須寫到回調函數(shù)里面
6.上卷下拉切換slideToggle:當隱藏一個動畫之后奸鬓,可以設置display樣式為none焙畔,以確保該元素不再影響頁面布局
7.淡出動畫fadeOut:用于隱藏所有匹配的元素,并帶有淡出的過渡動畫效果
.fadeOut([duration][,complete])
淡入動畫fadeIn其用法和上面的類似
淡入淡出切換fadeToggle:如果當前元素是可見的嗎串远,則將其隱藏(淡出)宏多;如果元素當前是隱藏的儿惫,則將其顯示(淡入)
8.淡入效果fadeTo:可以設置opacity的值,語法如下
.fadeTo(duration,opacity,[,complete])
9.animate方法:語法如下
.animate(properties[,duration][,easing][,complete]) .animate(properties,options)
該方法允許我們在任意數(shù)值的css屬性上創(chuàng)建動畫伸但。參數(shù)分析:properties:一個或者多個css屬性的鍵對所構成的object對象肾请。要特別注意所有用于動畫的屬性必須是數(shù)字的,除非有特別說明更胖。還有注意黨委屬性值的單位像素是PX铛铁。
10.停止動畫stop()
11.each()方法:jQuery的大部分方法都是針對元素合集的操作 ,所以jQuery會提供$(selector).each()來遍歷jQuery對象
.each只是處理jQuery對象的方法却妨,jQuery還提供了一個通用的jQuery.each()方法用來處理對象和數(shù)組的遍歷饵逐,語法如下
jQuery.each(array,callback) jQuery.each(object,callback)
第一個參數(shù)傳遞的就是一個對象或者數(shù)組,第二個是回調函數(shù)
each就是for循環(huán)方法的一個包裝彪标,內部就是通過for遍歷數(shù)組與對象
jQuery.each()函數(shù)還會根據(jù)每次調用callback的返回值來決定后續(xù)動作倍权,如果返回值為false,則停止循環(huán)
$.each(["Aaron","慕課"],function(index,value)){ return false;//停止迭代 }
12.查找數(shù)組中的索引inArray:判斷元素是否存在數(shù)組中捞烟,返回索引值薄声,如果不存在該值,則返回-1题画。語法如下:
jQuery.inArray(value,array[,fromIndex])
13.去空格神器trim方法:用于去除字符串兩端的空白字符奸柬,需要注意的是,如果這些空白符是在字符串的中間時婴程,它們會被保留廓奕,不會被移除
14.jQuery是一個合集對象,如果需要單獨操作合集中的某一個元素档叔,可以通過.get()方法獲取到桌粉,也可以獲得某個。語法:
.get([index])

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末衙四,一起剝皮案震驚了整個濱河市铃肯,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌传蹈,老刑警劉巖押逼,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異惦界,居然都是意外死亡挑格,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進店門沾歪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來漂彤,“玉大人,你說我怎么就攤上這事〈焱” “怎么了立润?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵,是天一觀的道長媳板。 經(jīng)常有香客問我桑腮,道長,這世上最難降的妖魔是什么蛉幸? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任破讨,我火速辦了婚禮,結果婚禮上巨缘,老公的妹妹穿的比我還像新娘添忘。我一直安慰自己,他們只是感情好若锁,可當我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布搁骑。 她就那樣靜靜地躺著,像睡著了一般又固。 火紅的嫁衣襯著肌膚如雪仲器。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天仰冠,我揣著相機與錄音乏冀,去河邊找鬼。 笑死洋只,一個胖子當著我的面吹牛辆沦,可吹牛的內容都是我干的。 我是一名探鬼主播识虚,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼肢扯,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了担锤?” 一聲冷哼從身側響起蔚晨,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎肛循,沒想到半個月后铭腕,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡多糠,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年累舷,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片熬丧。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡笋粟,死狀恐怖怀挠,靈堂內的尸體忽然破棺而出析蝴,到底是詐尸還是另有隱情害捕,我是刑警寧澤,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布闷畸,位于F島的核電站尝盼,受9級特大地震影響,放射性物質發(fā)生泄漏佑菩。R本人自食惡果不足惜盾沫,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望殿漠。 院中可真熱鬧赴精,春花似錦、人聲如沸绞幌。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽莲蜘。三九已至谭确,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間票渠,已是汗流浹背逐哈。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留问顷,地道東北人昂秃。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像杜窄,于是被迫代替她去往敵國和親肠骆。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內容

  • 第1章 動畫基礎隱藏和顯示 1-1 jQuery中隱藏元素的hide方法 讓頁面上的元素不可見羞芍,一般可以通過設置c...
    mo默22閱讀 760評論 0 8
  • jQuery中隱藏元素的hide方法 讓頁面上的元素不可見哗戈,一般可以通過設置css的display為none屬性。...
    阿r阿r閱讀 1,153評論 0 4
  • 隱藏元素的hide方法 讓頁面上的元素不可見荷科,一般可以通過設置css的display為none屬性唯咬。但是通過css...
    老夫撩發(fā)少年狂閱讀 1,094評論 0 2
  • (續(xù)jQuery基礎(2)) 四、動畫篇 第1章 動畫基礎隱藏和顯示 (1)隱藏元素的hide方法 讓頁面上的元素...
    凜0_0閱讀 459評論 0 6
  • 文/蘇久驍 首先謝謝大家戳進來畏浆,比心?? 我再來說一下今天要畫的這個花吧胆胰。名叫卷丹百合,寓意是永恒的純真刻获。...
    蘇久驍閱讀 665評論 1 4