Web實訓知識點 0409

2021-09-17 23:04:31 字數 1669 閱讀 4825

回顧:

1,加入jquery庫

2,文件就緒

$(document).ready(function())

相當於:

$(function())

})$("#button2").click(function())

})二.jquery的動畫效果(滑動)

有兩個方法:#slide和#panel

**實現:

點我滑動或者隱藏

hello

三.jquery的動畫效果(動畫)

方法:animate()用於建立自定義動畫

語法:$(select).animate(,speed,callback) 必須的params引數定義形成動畫的css屬性 而且可選的引數和其幾個引數相同。

1.通過animate()使效果向右移動200

**實現:

開始動畫

預設情況下,所以的html元素有乙個靜態的位置,且是不可移動的,如果需要改變,那麼需要將元素的position的屬性設定為:absolute,relative,fixed;

2.通過animate(),操作多個屬性

補充:是否可以用animate()方法操作所有的css屬性???

答:幾乎可以,但需要記住,但使用animate()方法的時候,必須使用camel標記法書寫所有的屬性名。

eg:css:background-color

camel:backgroundcolor

3.animate():使用相對值

4.通過animate(),使用佇列功能

意思是:如果你在彼此 之後向編寫多個animate()呼叫。jquery會建立包含這些方法呼叫的「內部」,佇列

然後逐一執行這些animate呼叫

eg:

hello world

四.jquery停止動畫(暫停)

方法:stop()

stop()用於在動畫完成前對他進行停止。只能暫停佇列中的乙個動畫,如果佇列有多個動畫,那麼暫停該動畫,然後系統會執行後面的動畫。

eg:

hello world

五. jquery-----鏈(chaining)

通過jquery可以把方法鏈結到一起chaining允許我們在一條語句中執行多個jquery方法(在相同的元素上)。

$(「p」).css(1000)

釋義:#p1元素首先會變紅,然後向上以1,5秒的速度移動,然後向下以1.5秒的速度移動。最後將背景色變為紅色。

如果我們不同鏈,那麼我們的寫法是:

$("#p1").css()

$("#p1").slideup

$("#p1").slidedown

$("#p1").animate(1000)

chaining的優點:

瀏覽不用多次去查詢相同的元素

jquery實現二級選單

1 加入jquery庫

2 文件就緒

$(document).reday(function)()

相當於$functio()

Web實訓知識點 0409

一.jquery的滑動效果 實現方法 slide與 panel 案例 如下 點我滑動或者隱藏 hello 二.jquery的顯示隱藏效果 實現方法 hide 與show 案例 如下 document ready function button2 click function 三.jquery的動畫效...

web實訓知識點0409

1.jquery的動畫顯示 顯示和隱藏 方法 hide 和 show document ready function button2 click function 2.jquery的動畫效果 滑動 有兩個方法 slide和 panel 點我滑動或者隱藏 hello 3.jquery的動畫效果 動畫 ...

web實訓知識點 0409

hide show document ready function button2 click function 1,加入jquery庫 2,文件就緒 document ready function 相當於 fu ncti on 基本語 法 function 基本語法 funct ion 基本 語法...