animate動(dòng)畫(huà)示例(淚奔的小孩)及stop和delay的使用
更新時(shí)間：2013年05月06日 17:44:48 作者：
實(shí)現(xiàn)原理：停止動(dòng)畫(huà)，當(dāng)一個(gè)元素有一個(gè)動(dòng)畫(huà)隊(duì)列時(shí)，停止的是當(dāng)前動(dòng)畫(huà)，緊接著執(zhí)行下一個(gè)動(dòng)畫(huà)，具體代碼如下，感興趣的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)jquery動(dòng)畫(huà)有所幫助
復(fù)制代碼 代碼如下:
<head>
<title></title>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
img
{
width:150px;
height:200px;
position:relative;
}
td{width:150px;height:200px;}
table{border:solid 1px black;}
</style>
<script type="text/javascript">
$(function () {
$('img').click(function () {
$(this).animate({ left: '+=150px' }, 2000).animate({ left: '+=150px' }, 2000).animate({ top: '+=200px' }, 2000).animate({ left: '-=150px' }, 2000).animate({ left: '-=150px' }, 2000).animate({ top: '+=200px' }, 2000).animate({ left: '+=150px' }, 2000).animate({ left: '+=150px' }, 2000);
})
//停止動(dòng)畫(huà)，當(dāng)一個(gè)元素有一個(gè)動(dòng)畫(huà)隊(duì)列時(shí)，停止的是當(dāng)前動(dòng)畫(huà)，緊接著執(zhí)行下一個(gè)動(dòng)畫(huà)
$('#btnStop').click(function () {
$('img').stop();
})
$('#btnYanChi').click(function () {
$('img').delay(2000).hide(2000);
})
})
</script>
</head>
<body>
<table>
<tr>
<td>
<img src="images/淚奔1.gif" />
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<input id="btnStop" type="button" value="stop" />
<input id="btnYanChi" type="button" value="延遲執(zhí)行" />
</body>
相關(guān)文章
jquery網(wǎng)頁(yè)加載進(jìn)度條的實(shí)現(xiàn)
本篇文章主要介紹了jquery網(wǎng)頁(yè)加載進(jìn)度條的實(shí)現(xiàn) ，在頁(yè)面加載的時(shí)候，上方紅色的進(jìn)度條，有興趣的可以了解一下2017-06-06
jquery綁定click事件，怎么都不生效，這個(gè)問(wèn)題很多朋友都有遇到過(guò)，下面為大家解決一下,需要的朋友可以參考下2014-02-02
jQuery鏈?zhǔn)秸{(diào)用與show知識(shí)淺析
這篇文章主要介紹了jQuery的XX如何實(shí)現(xiàn)？——2.show與鏈?zhǔn)秸{(diào)用 的相關(guān)資料，非常具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
jQuery+CSS實(shí)現(xiàn)滑動(dòng)的標(biāo)簽分欄切換效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)滑動(dòng)的標(biāo)簽分欄切換效果，具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
jquery-ui 進(jìn)度條功能示例【測(cè)試可用】
這篇文章主要介紹了jquery-ui 進(jìn)度條功能,結(jié)合完整實(shí)例形式分析了jquery-ui 結(jié)合時(shí)間函數(shù)實(shí)現(xiàn)進(jìn)度條功能相關(guān)操作技巧,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細(xì)介紹了jquery submit()不能提交表單的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了jquery隔行換色效果實(shí)現(xiàn)方法,涉及even及odd選擇器的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
jQuery之簡(jiǎn)單的表單驗(yàn)證實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery之簡(jiǎn)單的表單驗(yàn)證實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
用JQuery調(diào)用Session的實(shí)現(xiàn)代碼
用JQuery調(diào)用Session的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-10-10
jQuery中hover與mouseover和mouseout的區(qū)別分析
這篇文章主要介紹了jQuery中hover與mouseover和mouseout的區(qū)別,結(jié)合實(shí)例分析了jQuery中hover與mouseover和mouseout的區(qū)別與使用技巧,需要的朋友可以參考下2015-12-12