摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery停止動(dòng)畫</title> <script type="text/javascript" src="j
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery停止動(dòng)畫</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: 動(dòng)畫完成時(shí)執(zhí)行的一個(gè)函數(shù)
jauery滑動(dòng):
jquery的滑動(dòng)是通過高度的變化(向某個(gè)方向增大或者縮小)來動(dòng)態(tài)的顯示所匹配的元素
slideDown([speed][fn]) 下滑效果 通過高度的變化，向下增大的動(dòng)態(tài)效果
speed 下滑顯示過程的速度 英文值(fast/slow)或者毫秒
fn 動(dòng)畫完成時(shí)執(zhí)行是函數(shù)
slideUp([speed][fn]) 上滑效果 通過高度的變化，向上減小的動(dòng)態(tài)效果
speed 上滑顯示過程的速度 英文值(fast/slow)或者毫秒
fn 動(dòng)畫完成時(shí)執(zhí)行是函數(shù)
slideToggle([speed][fn]) 切換效果 通過高度的變化來切換元素的可見性
speed 上滑隱藏/下滑顯示 過程的速度 英文值(fast/slow)或者毫秒
fn 動(dòng)畫完成時(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í)長(zhǎng)
fn 動(dòng)畫完成時(shí)所執(zhí)行的函數(shù)
jquery自定義動(dòng)畫效果:
jquery中我們使用animate()方法創(chuàng)建自定義動(dòng)畫
語法:
$(selector).aniamte({params},speed,fn)
params 必需的 參數(shù)定義形成動(dòng)畫的CSS屬性
speed 可選的 參數(shù)規(guī)定效果的時(shí)長(zhǎng)，它可以取以下值:"slow","fast"或者毫秒值
fn 可選的 動(dòng)畫完成后所執(zhí)行的函數(shù)
jquery停止動(dòng)畫:
stop() 方法用于停止動(dòng)畫或效果，在她們完成之前，該方法適用于所有jquery效果函數(shù)，
包括滑動(dòng)，淡入淡出和自定義動(dòng)畫
語法: $(selector).stop(stopAll,goToEnd)
stopAll 可選參數(shù) 規(guī)定是否應(yīng)該清楚動(dòng)畫隊(duì)列，默認(rèn)是false 僅停止活動(dòng)的動(dòng)畫，
允許任何排入隊(duì)列的動(dòng)畫向后執(zhí)行
goToEnd 可選參數(shù) 規(guī)定是否立即完成當(dāng)前動(dòng)畫 默認(rèn)是false
默認(rèn)情況下 stop() 會(huì)清除在被選元素上指定的當(dāng)前動(dòng)畫
批改老師：天蓬老師批改時(shí)間：2018-11-28 17:43:12
老師總結(jié)：很多人愛上jQuery, 就是看上了他對(duì)動(dòng)畫的效果的簡(jiǎn)潔處理方式, 希望你好好學(xué)