jquery中動畫特效方法

基本特效

方法：                  說明

.show()              顯示選中的元素

.hide()                隱藏選中的元素

.toggle()            在選中的元素上切換顯示和隱藏的狀態

淡入淡出效果

方法：                  說明

.fadein()           淡入選中元素使其變得不透明

.fadeout()        淡出選中元素使其變得透明

.dadeto()         修改選中元素的透明度

.fadetoggle()    使用透明度來隱藏或顯示選中元素（切換其當前狀態，若當前顯示狀態，則切換至隱藏狀態）

滑動特效

方法：                  說明

.slideup()         使用滑動特效來顯示選中元素

.slidedown()    使用滑動特效來隱藏選中元素

.slidetoggle()   使用滑動特效來切換選中元素（切換其當前狀態，若當前顯示狀態，則切換至隱藏狀態）

自定義特效

方法：                  說明

.delay()          延遲佇列中操作的執行

.stop()           如果乙個動畫正在執行，就停止它

.animate()      建立自定義動畫

例一：html:

1

doctype html
>
2<
html
>
3<
head
>
4<
title
>jquery
title
>56
<
style
>
7body
10ul
13li
17style
>
18head
>
19<
body
>
20<
div 
id="page"
>
21<
h1 id
="header"
>list
h1>
22<
h2>buy groceries
h2>
23<
ul>
24<
li id
="one"
class
="hot"
><
em>fresh
em> figs
li>
25<
li id
="two"
class
="hot"
>pine nuts
li>
26<
li id
="three"
class
="hot"
>honey
li>
27<
li id
="four"
>balsamic vinegar
li>
28ul
>
29div
>
30<
script 
src="js/jquery-2.2.3.js"
>
script
>
31<
script 
src="js/js7.js"
>
script
>
32body
>
33html
>

js7.js:

1 $(function

() );
89 $li.on('click', function
() );
1213 });

例二：html:和上面一樣，把引用的js7.js替換成js8.js即可。

js8.js:

$(function

() , 500, function
() );
});});

jQuery特效動畫

jquery提供了很多動畫效果 一.控制元素顯示和隱藏 以前可以通過css 方法改變元素的display屬性的值達到顯示 block 和隱藏 none 元素的目的。在jquery中，提供了專門的方法控制元素的顯示和隱藏，並且增加了動畫效果。show 等同於 selector css display ...

jQuery 動畫與特效

在jquery中使用 hide 和 show 方法來隱藏和顯示 html 元素 hide 的語法形式 selector hide speed,callback show 的語法形式 selector show speed,callback speed 引數規定隱藏 顯示的速度，可以取以下值 slow...

JQuery特效與動畫總結

幾種特效 一 顯示與隱藏show hide js寫法 docment.getelementbyid p1 style.display block document.getelementbyid p1 style.display none jquery顯示與隱藏的方法 p1 css dislay bl...