2019-01-10 jQuery動(dòng)畫,jQuery循環(huán),元素絕對(duì)位置,鼠標(biāo)移入移出

jQuery animate() 方法用于創(chuàng)建自定義動(dòng)畫。
語(yǔ)法:

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

必需的 params 參數(shù)定義形成動(dòng)畫的 CSS 屬性。

可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值:"slow"、"fast" 或毫秒。

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

下面的例子演示 animate() 方法的簡(jiǎn)單應(yīng)用;它把 <div> 元素移動(dòng)到左邊,直到 left 屬性等于 250 像素為止:
實(shí)例

$("button").click(function(){
  $("div").animate({left:'250px'});
});

jQuery animate() - 操作多個(gè)屬性
實(shí)例

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

jQuery 遍歷 - each() 方法
實(shí)例
輸出每個(gè) li 元素的文本:

$("button").click(function(){
  $("li").each(function(){
    alert($(this).text())
  });
});

each() 方法規(guī)定為每個(gè)匹配元素規(guī)定運(yùn)行的函數(shù)。
返回 false 可用于及早停止循環(huán)

var arr = [ "one", "two", "three", "four"];     
$.each(arr, function(){     
   alert(this);     
});     
//上面這個(gè)each輸出的結(jié)果分別為:one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]     
$.each(arr1, function(i, item){     
   alert(item[0]);     
});     
//其實(shí)arr1為一個(gè)二維數(shù)組,item相當(dāng)于取每一個(gè)一維數(shù)組,   
//item[0]相對(duì)于取每一個(gè)一維數(shù)組里的第一個(gè)值   
//所以上面這個(gè)each輸出分別為:1   4   7     
var obj = { one:1, two:2, three:3, four:4};     
$.each(obj, function(key, val) {     
    alert(obj[key]);           
});   
//這個(gè)each就有更厲害了,能循環(huán)每一個(gè)屬性     
//輸出結(jié)果為:1   2  3  4

jquery獲取html元素的絕對(duì)位置坐標(biāo)和相對(duì)父元素的位置坐標(biāo)方法:
絕對(duì)位置坐標(biāo):
("#elem").offset().top("#elem").offset().left
相對(duì)父元素的位置坐標(biāo):
("#elem").position().top("#elem").position().left

static(默認(rèn)):默認(rèn)定位方式。
relative(相對(duì)定位):在static的基礎(chǔ)上,相對(duì)元素本來的位置變化,通過設(shè)定top,bottom,left,right實(shí)現(xiàn)。
absolute(絕對(duì)定位):是相對(duì)父元素來說的,如果父元素中有relative,那么該元素的位置是經(jīng)過計(jì)算后的結(jié)果。即absolute定位的參照物是“上一個(gè)定位過的父元素(static不算)”。絕對(duì)定位會(huì)使元素從文檔流中被刪除。
fixed(固定定位):fixed定位的參照物總是當(dāng)前的文檔。利用fixed定位,很容易讓一個(gè)div定位在瀏覽器文檔的左上,右上等方位。

mouseover與mouseenter

不論鼠標(biāo)指針穿過被選元素或其子元素,都會(huì)觸發(fā) mouseover 事件。

只有在鼠標(biāo)指針穿過被選元素時(shí),才會(huì)觸發(fā) mouseenter 事件。

mouseout與mouseleave

不論鼠標(biāo)指針離開被選元素還是任何子元素,都會(huì)觸發(fā) mouseout 事件。

只有在鼠標(biāo)指針離開被選元素時(shí),才會(huì)觸發(fā) mouseleave 事件。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容