為元素btn綁定一個(gè)動(dòng)畫(huà)效果，先向右移動(dòng)300px，再向下移動(dòng)300px，再向左移動(dòng)300px，再向上移動(dòng)300px，也就是回到初始位置
$('#btn').click(function(){
$('.box').animate({
left: '300px'
}, 1000)
$('.box').animate({
left: '300px',
top: '300px'
}, 1000)
$('.box').animate({
left: '0',
top: '300px'
}, 1000)
$('.box').animate({
left: '0',
top: '0'
}, 1000)
})
動(dòng)畫(huà)的停止與清除
.stop( [clearQueue ] [, jumpToEnd ] ) 方法為被選元素停止當(dāng)前正在運(yùn)行的動(dòng)畫(huà)
- clearQueue(default: false)
- jumpToEnd(default: false)
-
$('.box').stop()//停止當(dāng)前動(dòng)畫(huà)
當(dāng)兩個(gè)參數(shù)值都為false時(shí)，點(diǎn)擊按鈕，元素會(huì)停止當(dāng)前階段的動(dòng)畫(huà)直接向下一個(gè)目標(biāo)位置移動(dòng)，也就是說(shuō)案例中的動(dòng)畫(huà)分為四個(gè)部分，當(dāng)在執(zhí)行第二段動(dòng)畫(huà)時(shí)點(diǎn)擊按鈕，元素會(huì)跳過(guò)第二段剩下的動(dòng)畫(huà)效果，直接執(zhí)行第三段動(dòng)畫(huà)。 -
$('.box').stop(true, false)`//停止當(dāng)前動(dòng)畫(huà)，并清除未執(zhí)行的動(dòng)畫(huà)隊(duì)列
當(dāng)clearQueue的值為true，jumpToEnd的值為false時(shí)，點(diǎn)擊按鈕，元素會(huì)停止當(dāng)前的動(dòng)畫(huà)并清除剩余未執(zhí)行的動(dòng)畫(huà)隊(duì)列，也就是元素停在原地不動(dòng)。 -
$('.box').stop(true, true)//停止當(dāng)前動(dòng)畫(huà)，并清除未執(zhí)行的動(dòng)畫(huà)隊(duì)列，并且當(dāng)前動(dòng)畫(huà)展示最終狀態(tài)
當(dāng)兩個(gè)參數(shù)值都為true時(shí)，點(diǎn)擊按鈕，元素會(huì)停止當(dāng)前動(dòng)畫(huà)并清除未執(zhí)行的動(dòng)畫(huà)隊(duì)列，并直接展示當(dāng)前動(dòng)畫(huà)最終狀態(tài)。也就是說(shuō)案例中的四段動(dòng)畫(huà)，如果在執(zhí)行第二段動(dòng)畫(huà)時(shí)點(diǎn)擊此按鈕，元素會(huì)直接移動(dòng)到（300,300）的位置并不會(huì)執(zhí)行剩余的動(dòng)畫(huà)隊(duì)列 -
$('.box').finish()//停止當(dāng)前動(dòng)畫(huà)，并清除未執(zhí)行的動(dòng)畫(huà)隊(duì)列，并且最后動(dòng)畫(huà)展示最終狀態(tài)
當(dāng)使用finish()時(shí)，點(diǎn)擊按鈕，元素剩余所有動(dòng)畫(huà)隊(duì)列（包括當(dāng)前動(dòng)畫(huà)未執(zhí)行的部分）會(huì)被清除，并且展示最后動(dòng)畫(huà)的最終狀態(tài)，在次案例中，如果在動(dòng)畫(huà)執(zhí)行過(guò)程中點(diǎn)擊此按鈕，元素會(huì)立刻回到動(dòng)畫(huà)隊(duì)列的重點(diǎn)也就是起始位置
