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。注...