jQuery 學習筆記之七 jQuery 動畫

2022-02-05 01:11:46 字數 1722 閱讀 9793

jquery中的動畫 

一 show() 和hide()方法

show()方法和hide()方法是jquery中最基本的動畫方。

呼叫hide 會將元素的display樣式改為"none"

element.css("display","none"); //通過css方法隱藏元素。

呼叫show()方法將元素的dispaly樣式設定為先前的顯示狀態("block","inline"或其他除了"none"之外的值)。

$("element").show();

show()方法指定乙個速度引數,可以指定乙個速度關鍵字 slow $("element").show("slow");

元素將在600 毫秒內慢慢地顯示出來。還有normal fast 分割槽是400毫秒 200 毫秒

還可以在顯示速度中指定乙個數字,單位是毫秒。

二 fadein 方法和fadeout

與show()方法不同的是,fadein()方法fadeout()方法只能改變元素的不透明度,fadeout()方法會在指定的一段時間內降低元素的不透明度,直到元素完全消失("display:none")

fadein()方法則相反。

$("#panel h5.head").toggle(function(),function());

單擊鏈結後內容慢慢的消失了,再次點選慢慢的顯示出來。

三 slideup()方法和slidedown()方法

lsideup()方法和slidedown()方法只會改變元素的高度,如果乙個元素的display 屬性值為"none",當呼叫slidedown()方法時,這個元素由上至下延伸顯示,

slideup()方法正好相反,元素將由下到上縮短隱藏,使用slideup() 方法和slidedown()方法再次對"內容"的顯示和隱藏方式進行改變。

$("#panel he.head").toggle(function(),function());

四 自定義動畫方法animate()

animate語法

animate(params,speed,callback);

(1)params 以個包含樣式屬性的對映,比如

(2)speed ,速度引數,可選

(3)callback,在動畫完成時執行的函式,可選

為了使這個元素動起來,要更改元素的"left"樣式屬性,為了影響該元素的top left bottom right 樣式屬性,必須先把元素的position 樣式設定為relative 或者absolute

$(function(),3000)

})}) 首先為id 為"panel"的元素建立乙個單機事件,然後對元素加入animate()方法,使元素在3秒(3000毫秒)內,向右移動500畫素

2.累加,累減動畫

如果在500px之前加上"+="或者"-="符號即表示在當前位置累加或者累減。

$(function() ,300);

})})

3.多重動畫

同時執行多個動畫,在元素向右滑動的同時,放大元素的高度,

$(function(),3000);

})})

執行**後,元素在向右滑動的同時,也會放大高度。

按順序執行多個動畫

只需把**拆開,然後按照順序寫就可以了

$(this).animate(,3000);

$(this).animate(,3000);

也可以改為鏈式的寫法

jQuery學習之七 CSS

這一篇,話不多說,直接來學習吧,我覺得很重要 1 css name pro val fn 訪問匹配元素的樣式屬性。引數解析 name 要訪問的屬性名稱 properties 要設定為樣式屬性的名 值對 name,value 屬性名,屬性值 name,function index,value 屬性名 ...

jQuery學習筆記(二)之jQuery選擇器

html頁面元素就一些html標籤 元素 和對應的html元素屬性組成,屬性包括id,class,獲取css樣式屬性等,其中通過css樣式屬性獲取jquery,這裡的css樣式屬性就可以稱為jquery的css選擇器 另外jquery還支援xpath選擇,其實跟css差不多。下面就這對各種常用的選擇...

jQuery學習筆記之ajax

function chagedistrict obj var data var id main homeorcompany zip code ajax 在ajax裡還有很多可選的屬性 asyc 預設 true 預設設定下,所有請求均為非同步請求。如果需要傳送同步請求,請將此選項設定為 false。注...