abstrait：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery停止動畫</title> <script type="text/javascript" src="j
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery停止動畫</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style>
div{
height:200px;
margin:100px,0px;
}
.box{
width:100px;
height:100px;
background: blue;
position: absolute;
}
.box2{
width:100px;
height:100px;
background:pink;
position: absolute;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('#right').click(function(){
$('.box').animate({left:'500px',fontSize:'40px'},3000)
})
$('#stop').click(function(){
$('.box').stop(false,true)
})
$('#right_1').click(function(){
$('.box2').animate({left:'+500px'},3000)
$('.box2').animate({fontSize:'40px'},600)
})
$('#stop_1').click(function(){
$('.box2').stop(false,true)
})
})
</script>
<div>
<button id="right">點(diǎn)擊右移</button>
<div class="box">中文網(wǎng)</div>
<button id="stop">停止</button>
</div>
<div>
<button id="right_1">點(diǎn)擊右移</button>
<div class="box2">中文網(wǎng)</div>
<button id="stop_1">停止</button>
</div
</body>
</html>
hide() 隱藏顯示的元素
基本格式: hide([speed][seeing][fn])
show() 顯示隱藏的元素
基本格式: show([speed][seeing][fn])
speed: 隱藏/顯示過程的速度，速度是毫秒
seeing: 指定切換效果
fn: 動畫完成時(shí)執(zhí)行的一個(gè)函數(shù)
jauery滑動:
jquery的滑動是通過高度的變化(向某個(gè)方向增大或者縮小)來動態(tài)的顯示所匹配的元素
slideDown([speed][fn]) 下滑效果 通過高度的變化，向下增大的動態(tài)效果
speed 下滑顯示過程的速度 英文值(fast/slow)或者毫秒
fn 動畫完成時(shí)執(zhí)行是函數(shù)
slideUp([speed][fn]) 上滑效果 通過高度的變化，向上減小的動態(tài)效果
speed 上滑顯示過程的速度 英文值(fast/slow)或者毫秒
fn 動畫完成時(shí)執(zhí)行是函數(shù)
slideToggle([speed][fn]) 切換效果 通過高度的變化來切換元素的可見性
speed 上滑隱藏/下滑顯示 過程的速度 英文值(fast/slow)或者毫秒
fn 動畫完成時(shí)執(zhí)行是函數(shù)
jquery淡入淡出:
query是通過控制不透明度的變化來控制匹配到的元素的淡入淡出效果
fadeIn([speed][fn]) 通過不透明的變化來實(shí)現(xiàn)匹配到元素的淡入效果
fadeOut([speed][fn]) 通過不透明的變化來實(shí)現(xiàn)匹配到元素的淡出效果
fadeToggle([speed][fn]) 通過不透明的變化來開關(guān)所有匹配元素的淡入淡出效果
fadeTo([speed] opacity [fn]) 把所有匹配到元素的不透明度以漸進(jìn)發(fā)方式調(diào)整到指定的不透明度
opacity fadeTo()方法中必須參數(shù)，控制淡入淡出的效果的不透明度(值介于0-1之間)
speed 規(guī)定效果的時(shí)長
fn 動畫完成時(shí)所執(zhí)行的函數(shù)
jquery自定義動畫效果:
jquery中我們使用animate()方法創(chuàng)建自定義動畫
語法:
$(selector).aniamte({params},speed,fn)
params 必需的 參數(shù)定義形成動畫的CSS屬性
speed 可選的 參數(shù)規(guī)定效果的時(shí)長，它可以取以下值:"slow","fast"或者毫秒值
fn 可選的 動畫完成后所執(zhí)行的函數(shù)
jquery停止動畫:
stop() 方法用于停止動畫或效果，在她們完成之前，該方法適用于所有jquery效果函數(shù)，
包括滑動，淡入淡出和自定義動畫
語法: $(selector).stop(stopAll,goToEnd)
stopAll 可選參數(shù) 規(guī)定是否應(yīng)該清楚動畫隊(duì)列，默認(rèn)是false 僅停止活動的動畫，
允許任何排入隊(duì)列的動畫向后執(zhí)行
goToEnd 可選參數(shù) 規(guī)定是否立即完成當(dāng)前動畫 默認(rèn)是false
默認(rèn)情況下 stop() 會清除在被選元素上指定的當(dāng)前動畫
Professeur correcteur：天蓬老師Temps de correction：2018-11-28 17:43:12
Résumé du professeur：很多人愛上jQuery, 就是看上了他對動畫的效果的簡潔處理方式, 希望你好好學(xué)