Java Web:單詞積累，JQUERY動(dòng)畫(huà)效果，自制gif演示效果，PPT，圖片素材【詩(shī)書(shū)畫(huà)唱】
$(function(){
$('#btn').click(function(){
$('#ctx1').fadeOut(5000);
$('#ctx2').fadeIn(5000);
});
//實(shí)現(xiàn)閃爍效果
$('#shine').click(function(){
$('#ctx1').fadeToggle();
});
//自動(dòng)閃爍效果
$('#ctx1').fadeToggle(500,function(){
$(this).fadeToggle(500,arguments.callee);
});
})
<input type="button" id="btn" value="演示" />
<input type="button" id="shine" value="閃爍" />
<div id="ctx1"><img src="img/25.png" /></div>
<div id="ctx2" style="display: none;"><img src="img/2.png" /></div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
$('#ctx').slideUp(5000);
$('#ctx1').slideDown(5000);
})
</script>
</head>
<body>
<div id="ctx1" style="display: none;"><img src="img/ele1.png" /></div>
<div id="ctx"><img src="img/ele1.png" /></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.h {
display: none;
}
.s {
display: block;
}
</style>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
? ? //$('.h').show(5000);?
? ? //$('.s').hide(5000);
? ??
? ? $('#btn').click(function(){
? ? $('div').first().show(3000,function(){
// ? ? $('div').eq(1).show(5000,function(){
// ? ? $('div').eq(2).show(5000);
// ? ? });
? ? ? ? ? ? ? ? ? ? ? ? $(this).next().show(3000,function(){
? ? ? ? ? ? ? ? ? ? ? ? $(this).next().show(5000);
? ? ? ? ? ? ? ? ? ? ? ? });
? ? }); ? ?
? ? });
});
</script>
</head>
<body>
<input type="button" value="動(dòng)畫(huà)隊(duì)列" id="btn" />
<div class="h"><img src="img/1.png" /></div>
<div class="h"><img src="img/2.png" /></div>
<div class="h"><img src="img/3.png" /></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
$('#btn').click(function(){
$('#ctx').animate({width: '300px'},2000)
? ? .delay(2000)
? ? .animate({height: '300px'},1000)
? ? .queue(function(next){
? ? $(this).css('background-color','blue');
? ? //如果需要繼續(xù)執(zhí)行后面的動(dòng)畫(huà)效果，就必須調(diào)用next函數(shù)
? ? next();
? ? }).animate({fontSize: '+=20px'},2000)
? ? .animate({left: '100px'},1000);
});
});
</script>
</head>
<body>
<input type="button" value="自定義動(dòng)畫(huà)" id="btn" />
<div id="ctx" style="background-color: pink;position: absolute;">詩(shī)書(shū)畫(huà)唱！三連！關(guān)注！</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
$('#btn').click(function(){
$('#ctx').animate({
width: '200px',
height: '200px',
fontSize: '30px',
left: '200px',
top: '200px'
},3000,function(){
alert('動(dòng)畫(huà)執(zhí)行結(jié)束');
});
});
});
</script>
</head>
<body>
<input type="button" value="自定義動(dòng)畫(huà)" id="btn" />
<div id="ctx" style="background-color: pink;position: absolute;">詩(shī)書(shū)畫(huà)唱</div>
</body>
</html>
<!DOCTYPE html>
<html>
? ? <head>
<meta charset="utf-8">
<title>Abraham Lincoln's Gettysburg Address</title>
<style type="text/css">
? ? html, body {
? margin: 0;
? padding: 0;
}
body {
? font: 62.5% Verdana, Helvetica, Arial, sans-serif;
? color: #000;
? background: #fff;
}
#container {
? font-size: 1.2em;
? margin: 10px 2em;
}
h1 {
? font-size: 2.5em;
? margin-bottom: 0;
}
h2 {
? font-size: 1.3em;
? margin-bottom: .5em;
}
h3 {
? font-size: 1.1em;
? margin-bottom: 0;
}
code {
? font-size: 1.2em;
}
a {
? color: #06581f;
}
#switcher {
? width: 300px;
? padding: .5em;
? border: 1px solid #777;
}
.label {
? width: 130px;
? margin: .5em 0;
? cursor: pointer;
}
</style>
<script type="text/javascript" srcc="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
? ? $(document).ready(function(){
//元素選擇器+類選擇器
/*var $speech = $('div.speech');
var defaultSize = $speech.css('fontSize');?
//可持續(xù)的放大或者縮小字體
$('#switcher button').click(function() {
//parseFloat會(huì)在一個(gè)字符串中從左到右地查找一個(gè)浮點(diǎn)數(shù)。
//例如，它會(huì)將字符串'12'轉(zhuǎn)換成數(shù)字12。
//另外，它還會(huì)去掉末尾的非數(shù)字字符，因此'12px'就變成了12
? ? var num = parseFloat($speech.css('fontSize'));
switch (this.id) {? ? ? ?
case 'switcher-large':? ? ? ? ?
? ? num *= 1.4;? ? ? ? ? ? ? ?
break;? ? ? ?
case 'switcher-Small':? ? ? ? ?
? ? num /= 1.4;? ? ? ? ?
break;? ? ? ?
default:? ? ? ? ?
? ? num = parseFloat(defaultSize);? ? ? ? ? ? ?
}? ? ??
$speech.css('fontSize', num + 'px');?
});*/
? ? ? ? ? ? ? ? //無(wú)效果
/*$('p').eq(1).hide();? ? ?
$('a.more').click(function(event) {?
//避免a標(biāo)簽進(jìn)行頁(yè)面跳轉(zhuǎn)的默認(rèn)動(dòng)作
? ? event.preventDefault();? ? ?
$('p').eq(1).show();? ? ??
$(this).hide();? ?
});*/
//添加效果1:指定顯示速度
//對(duì)于jQuery提供的任何效果，都可以指定兩種預(yù)設(shè)的速度參數(shù)：'slow'和'fast'。使 用.show('slow')會(huì)在600毫秒（0.6秒）內(nèi)完成效果，而.show('fast')則是200毫秒（0.2秒）。 如果傳入的是其他字符串，jQuery就會(huì)在默認(rèn)的400毫秒內(nèi)完成效果。要指定更精確的速度，可 以使用毫秒數(shù)值，例如.show(850)。注意，與字符串表示的速度參數(shù)名稱不同，數(shù)值不需要使 用引號(hào)。
/*$('p').eq(1).hide();?
$('a.more').click(function(event) {? ? ?
event.preventDefault();? ? ?
$('p').eq(1).show('slow');? ? ??
$(this).hide();? ?
});*/
//添加效果2:淡入淡出
//如果想在顯示整個(gè)段落時(shí)，只是逐漸地增大其不透明度，那么可以使用.fadeIn('slow')方法
//類似地，要逐漸減少不透明度，可以使用.fadeOut()。?
? ? ? ? ? ? ? ? /*$('p').eq(1).hide();? ?
$('a.more').click(function(event) {? ? ?
event.preventDefault();? ? ?
$('p').eq(1).fadeIn('slow');? ? ??
$(this).hide();? ?
});*/
//添加效果3:滑上和滑下
//使用jQuery的.slideDown()和.slideUp()方法僅改變?cè)氐母叨?段落以垂直滑入的效果出現(xiàn)
/*$('p').eq(1).hide();? ? ?
$('a.more').click(function(event) {? ? ?
event.preventDefault();? ? ?
$('p').eq(1).slideDown('slow');? ? ??
$(this).hide();? ?
});*/
//添加效果4:切換可見(jiàn)性
/*var $firstPara = $('p').eq(1);? ?
$firstPara.hide();? ? ?
$('a.more').click(function(event) {? ? ?
event.preventDefault();? ? ?
if ($firstPara.is(':hidden')) {?
$firstPara.fadeIn('slow');? ? ? ??
$(this).text('read less');? ? ?
} else {? ? ? ?
$firstPara.fadeOut('slow');? ? ? ?
$(this).text('read more');? ? ?
}? ?
});*/
//添加效果5：jQuery提供了一個(gè).toggle()方法，
//該方法的作用類似于.show()和.hide()方法，
//而且與它們一樣的是，.toggle()方法時(shí)長(zhǎng)參數(shù)也是可選的。
//另一個(gè)復(fù)合方法是.slideToggle()，
//該方法通過(guò) 逐漸增加或減少元素高度來(lái)顯示或隱藏元素。
? ? ? ? ? ? ? ? var $firstPara = $('p').eq(1);? ?
$firstPara.hide();? ? ?
$('a.more').click(function(event) {? ? ?
event.preventDefault();? ? ?
$firstPara.slideToggle('slow');? ? ?
var $link = $(this);?
? ? ? ? ? ? ? ? ? ? if ($link.text() == 'read more') {? ? ? ?
$link.text('read less');? ? ??
} else {? ? ? ?
$link.text('read more');? ? ?
}? ?
});?
//創(chuàng)建自定義動(dòng)畫(huà)1
//給修改字體大小的按鈕添加動(dòng)畫(huà)效果
var $speech = $('div.speech');? ?
var defaultSize = $speech.css('fontSize');? ?
$('#switcher button').click(function() {? ? ?
var num = parseFloat($speech.css('fontSize'));? ? ?
switch (this.id) {? ? ? ?
case 'switcher-large':? ? ? ? ?
? ? num *= 1.4;? ? ? ? ? ? ? ?
break;? ? ? ?
? ? ? ? case 'switcher-Small':? ? ? ? ?
? ? num /= 1.4;? ? ? ? ?
break;? ? ? ?
default:? ? ? ? ?
? ? num = parseFloat(defaultSize);? ? ??
}? ? ?
$speech.animate({fontSize: num + 'px'}, 'slow');??
});
? ? ? ? ? ? ? ? //創(chuàng)建自定義動(dòng)畫(huà)2
//在元素的CSS定位沒(méi)有設(shè)置成relative或absolute的情況下，
//調(diào)整left屬性對(duì)于匹配的元素毫無(wú)作用。
//所有塊級(jí)元素默認(rèn)的CSS定位屬性都是static，
//這個(gè)值精確地表明：在改變?cè)氐亩ㄎ粚傩灾霸噲D移動(dòng)它們，它們只會(huì)保持靜止不動(dòng)。?
/*$('div.label').click(function() {? ? ?
var paraWidth = $('div.speech p').outerWidth();? ? ?
var $switcher = $(this).parent();? ? ?
var switcherWidth = $switcher.outerWidth();??
$switcher.css({? ? ? ?
position: 'relative'? ? ?
}).animate({? ? ? ?
borderWidth: '5px',? ? ? ?
left: paraWidth - switcherWidth,? ? ? ?
height: '+=20px'? ??
}, 'slow');? ??
});*/
//創(chuàng)建自定義動(dòng)畫(huà)3
//并發(fā)與排隊(duì)效果
/*$('div.label').click(function() {? ? ?
var paraWidth = $('div.speech p').outerWidth();? ? ?
var $switcher = $(this).parent();? ? ?
var switcherWidth = $switcher.outerWidth();? ? ?
$switcher.css({position: 'relative'})? ? ? ?
.fadeTo('fast', 0.5)//不透明度減退為0.5? ? ??
.animate({left: paraWidth - switcherWidth}, 'slow')//移動(dòng)到右側(cè)?
.fadeTo('slow', 1.0)//漸增回完全不透明? ? ??
.slideUp('slow')//隱藏
? ? ? ? ? ? ? ? ? ? .slideDown('slow');//再顯示出來(lái)? ?
});*/
//創(chuàng)建自定義動(dòng)畫(huà)4
//把非效果方法添加到隊(duì)列中的一種方式，就是使用.queue()方法
//在slideUp()執(zhí)行后但在slideDown()執(zhí)行前， 把<div id="switcher">的背景顏色修改為紅色
? ? ? ? ? ? ? ? $('div.label').click(function() {? ? ?
var paraWidth = $('div.speech p').outerWidth();? ? ?
var $switcher = $(this).parent();? ? ?
var switcherWidth = $switcher.outerWidth();? ? ?
$switcher.css({position: 'relative'})? ? ? ?
.fadeTo('fast', 0.5)//不透明度減退為0.5? ? ??
.animate({left: paraWidth - switcherWidth}, 'slow')//移動(dòng)到右側(cè)?
.fadeTo('slow', 1.0)//漸增回完全不透明? ? ??
.slideUp('slow')//隱藏
//.css({backgroundColor: '#f00'}) //在這里將背景色設(shè)置為紅色，但是在單擊后會(huì)馬上執(zhí)行
//queue()方法就可以把一個(gè)匿名函數(shù)添加到相應(yīng)元素的效果隊(duì)列中。 在這個(gè)函數(shù)內(nèi)部，我們把背景顏色設(shè)置為紅色，然后又調(diào)用了next()方法，添加的這個(gè)next ()方法可以讓隊(duì)列在中斷的地方再接續(xù)起來(lái)，然后再與后續(xù)的.slideDown ('slow')連綴在一起。如果在此不使用next()方法，動(dòng)畫(huà)就會(huì)中斷。?
.queue(function(next) {? ? ? ? ?
$switcher.css({backgroundColor: '#f00'});? ? ? ? ?
next();? ? ? ?
})
//使用回調(diào)函數(shù)也可以實(shí)現(xiàn)queue的效果
? ? ? ? ? ? ? ? ? ? //.slideUp('slow', function() {? ? ? ? ?
// $switcher.css({backgroundColor: '#f00'});? ? ? ?
//})?
? ? ? ? ? ? ? ? ? ? .slideDown('slow');//再顯示出來(lái)? ?
});
//自定義動(dòng)畫(huà)5
//處理多組元素
$('p').eq(2).css('border', '1px solid #333')?
.click(function() {?
? ? ? ? //段落3
var $clickedItem = $(this);
//段落3收起，段落4展開(kāi)
$clickedItem.next().slideDown('slow', function() {
$clickedItem.slideUp('slow');? ? ? ??
});? ? ?
? ? });? ?
$('p').eq(3).css('backgroundColor', '#ccc').hide();? ?
});
</script>
? ? </head>
? ? <body>
<div id="container">
? ? <h2>Abraham Lincoln's Gettysburg Address</h2>
? ? <div id="switcher">
? ? <div>Text Size</div>
? ? <button id="switcher-default">Default</button>
? ? <button id="switcher-large">Bigger</button>
? ? <button id="switcher-Small">Smaller</button>
? ? </div>
? ? <div>
<p>Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.</p>
<p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting-place for those who here gave their lives that the nation might live. It is altogether fitting and proper that we should do this. But, in a larger sense, we cannot dedicate, we cannot consecrate, we cannot hallow, this ground.</p>
<a href="#">read more</a>
<p>The brave men, living and dead, who struggled here have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember, what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced.</p>
<p>It is rather for us to be here dedicated to the great task remaining before us—that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion—that we here highly resolve that these dead shall not have died in vain—that this nation, under God, shall have a new birth of freedom and that government of the people, by the people, for the people, shall not perish from the earth.</p>
? ? </div>
</div>
? ? </body>
</html>
<!DOCTYPE html>
<html>
? ? <head>
<meta charset="utf-8">
<title>Abraham Lincoln's Gettysburg Address</title>
<style type="text/css">
? ? html, body {
? margin: 0;
? padding: 0;
}
body {
? font: 62.5% Verdana, Helvetica, Arial, sans-serif;
? color: #000;
? background: #fff;
}
#container {
? font-size: 1.2em;
? margin: 10px 2em;
}
h1 {
? font-size: 2.5em;
? margin-bottom: 0;
}
h2 {
? font-size: 1.3em;
? margin-bottom: .5em;
}
h3 {
? font-size: 1.1em;
? margin-bottom: 0;
}
code {
? font-size: 1.2em;
}
a {
? color: #06581f;
}
#switcher {
? width: 300px;
? padding: .5em;
? border: 1px solid #777;
}
.label {
? width: 130px;
? margin: .5em 0;
? cursor: pointer;
}
</style>
<script type="text/javascript" srcc="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
? ? $(document).ready(function(){
var $speech = $('div.speech');? ?
var defaultSize = $speech.css('fontSize');? ?
$('#switcher button').click(function() {? ? ?
var num = parseFloat($speech.css('fontSize'));? ? ?
switch (this.id) {? ? ? ?
case 'switcher-large':? ? ? ? ?
? ? num *= 1.4;? ? ? ? ? ? ? ?
break;? ? ? ?
? ? ? ? case 'switcher-Small':? ? ? ? ?
? ? num /= 1.4;? ? ? ? ?
break;? ? ? ?
default:? ? ? ? ?
? ? num = parseFloat(defaultSize);? ? ??
}? ? ?
$speech.animate({fontSize: num + 'px'}, 'slow');??
});
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? $('div.label').click(function() {? ? ?
var paraWidth = $('div.speech p').outerWidth();? ? ?
var $switcher = $(this).parent();? ? ?
var switcherWidth = $switcher.outerWidth();? ? ?
$switcher.css({position: 'relative'})? ? ? ?
.fadeTo('fast', 0.5)? ? ??
.animate({left: paraWidth - switcherWidth}, 'slow')?
.fadeTo('slow', 1.0)? ? ??
.slideUp('slow')?
.queue(function(next) {? ? ? ? ?
$switcher.css({backgroundColor: '#f00'});? ? ? ? ?next();? ? ? ?
})?
? ? ? ? ? ? ? ? ? ? .slideDown('slow');? ?
});
$('p').eq(2).css('border', '1px solid #333')?
.click(function() {?
var $clickedItem = $(this);
$clickedItem.next().slideDown('slow', function() {
$clickedItem.slideUp('slow');? ? ? ??
});? ? ?
? ? });? ?
$('p').eq(3).css('backgroundColor', '#ccc').hide();? ?
});
</script>
? ? </head>
? ? <body>
? ? <!--??
? ? (1) 修改樣式表，一開(kāi)始先隱藏頁(yè)面內(nèi)容，當(dāng)頁(yè)面加載后，慢慢地淡入內(nèi)容；
$(document).ready(function() {
? ? $('body').css('display', 'none');
? ? $('body').fadeIn(1500);//自行設(shè)置時(shí)間
});
?
(2) 在鼠標(biāo)懸停到段落上面時(shí)，給段落應(yīng)用黃色背景；?
$(document).ready(function() {
? ? $('p').mouseover(function(){
? ? ? ? ?$(this).css('backgroundColor', 'yellow');
? ? });//當(dāng)鼠標(biāo)移動(dòng)到段落上時(shí)段落背景應(yīng)用黃色。
? ? $('p').mouseout(function(){
? ? ? ? ?$(this).css('backgroundColor', 'white');
? ? });//當(dāng)鼠標(biāo)移出段落上時(shí)段落背景應(yīng)用白色。
});
(3) 單擊標(biāo)題（<h2>）使其不透明度變?yōu)?5%，同時(shí)添加20px的左外邊距，
? ? 當(dāng)這兩個(gè)效果完 成后，把講話文本變成50%的不透明度；?
$(document).ready(function() {
? ? $('h2').click(function(){
? ? ? ? $(this)
? ? ? ? ? ? .fadeTo('slow', 0.25)
? ? ? ? ? ? .animate({
? ? ? ? ? ? ? paddingLeft: '+=200' + 'px'//或者paddingLeft: '+=200px'
? ? ? ? ? ? },{
? ? ? ? ? ? ? duration: 'slow',
? ? ? ? ? ? ? queue: false
? ? ? ? ? ? })
? ? ? ? ? ? .queue(function(next){
? ? ? ? ? ? ? $('div.speech').fadeTo('slow', 0.5)
? ? ? ? ? ? });
? ? });
});
(4) 挑戰(zhàn)：按下方向鍵時(shí)，使樣式轉(zhuǎn)換器<div id="switcher">向相應(yīng)的方向平滑移動(dòng)20像素；
? ? 四個(gè)方向鍵的鍵碼 分別是37（左）、38（上）、39（右）和40（下）。?
? var key_left = 37;
? var key_up = 38;
? var key_right = 39;
? var key_down = 40;
? var $switcher = $('#switcher');
? $switcher.css('position', 'relative');
? $(document).keyup(function(event){
? ? switch(event.which){
? ? ? case key_left:
? ? ? ? $switcher
? ? ? ? ? ? .animate({
? ? ? ? ? ? ? left: '-=20px'
? ? ? ? ? ? },{
? ? ? ? ? ? ? duration: 'fast'
? ? ? ? ? ? })
? ? ? ? break;
? ? ? case key_up:
? ? ? ? $switcher
? ? ? ? ? ? .animate({
? ? ? ? ? ? ? top: '-=20px'
? ? ? ? ? ? },{
? ? ? ? ? ? ? duration: 'fast'
? ? ? ? ? ? })
? ? ? ? break;
? ? ? case key_right:
? ? ? ? $switcher
? ? ? ? ? ? .animate({
? ? ? ? ? ? ? left: '+=20px'
? ? ? ? ? ? },{
? ? ? ? ? ? ? duration: 'fast'
? ? ? ? ? ? })
? ? ? ? break;
? ? ? case key_down:
? ? ? ? $switcher
? ? ? ? ? ? .animate({
? ? ? ? ? ? ? top: '+=20px'
? ? ? ? ? ? },{
? ? ? ? ? ? ? duration: 'fast'
? ? ? ? ? ? })
? ? }
? });
-->
<div id="container">
? ? <h2>Abraham Lincoln's Gettysburg Address</h2>
? ? <div id="switcher">
? ? <div>Text Size</div>
? ? <button id="switcher-default">Default</button>
? ? <button id="switcher-large">Bigger</button>
? ? <button id="switcher-Small">Smaller</button>
? ? </div>
? ? <div>
<p>Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.</p>
<p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting-place for those who here gave their lives that the nation might live. It is altogether fitting and proper that we should do this. But, in a larger sense, we cannot dedicate, we cannot consecrate, we cannot hallow, this ground.</p>
<a href="#">read more</a>
<p>The brave men, living and dead, who struggled here have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember, what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced.</p>
<p>It is rather for us to be here dedicated to the great task remaining before us—that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion—that we here highly resolve that these dead shall not have died in vain—that this nation, under God, shall have a new birth of freedom and that government of the people, by the people, for the people, shall not perish from the earth.</p>
? ? </div>
</div>
? ? </body>
</html>
圖片素材：
單詞積累：
jQuery中顯示方法為：show()，隱藏方法為：hide()。在無(wú)參數(shù)的時(shí)候，只是硬性的顯示內(nèi)容和隱藏內(nèi)容。 除了直接使用毫秒來(lái)控制速度外，jQuery 還提供了三種預(yù)設(shè)速度參數(shù)字符串：slow、 normal 和 fast，分別對(duì)應(yīng) 600 毫秒、400 毫秒和 200 毫秒。?
jQuery 提供了一組改變?cè)馗叨鹊姆ǎ簊lideUp()、slideDown()和slideToggle()。顧名思義，向上收縮(卷動(dòng))和向下展開(kāi)(滑動(dòng))。
jQuery提供了一組專門(mén)用于透明度變化的方法：fadeIn()和fadeOut()，分別表示淡入、 淡出，當(dāng)然還有一個(gè)自動(dòng)切換的方法：.fadeToggle()。
jQuery提供了幾種簡(jiǎn)單常用的固定動(dòng)畫(huà)方面我們使用。但有些時(shí)候，這些簡(jiǎn)單動(dòng)畫(huà)無(wú)法滿足我們更加復(fù)雜的需求。這個(gè)時(shí)候，jQuery提供了一個(gè)animate()方法來(lái)創(chuàng)建我們的自定義動(dòng)畫(huà)，滿足更多復(fù)雜多變的要求。?
很多時(shí)候需要停止正在運(yùn)行中的動(dòng)畫(huà)，jQuery 為此提供了一個(gè)stop()方法。它有兩個(gè)可選參數(shù)：stop(clearQueue,gotoEnd)；clearQueue 傳遞一個(gè)布爾值，代表是否停止執(zhí)行整個(gè)動(dòng)畫(huà)列隊(duì)，gotoEnd 代表是否直接跳過(guò)正在執(zhí)行的動(dòng)畫(huà)效果。
動(dòng)畫(huà)效果：
