animate動(dòng)畫示例(淚奔的小孩)及stop和delay的使用
更新時(shí)間：2013年05月06日 17:44:48 作者：
實(shí)現(xiàn)原理：停止動(dòng)畫，當(dāng)一個(gè)元素有一個(gè)動(dòng)畫隊(duì)列時(shí)，停止的是當(dāng)前動(dòng)畫，緊接著執(zhí)行下一個(gè)動(dòng)畫，具體代碼如下，感興趣的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)jquery動(dòng)畫有所幫助
復(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)畫，當(dāng)一個(gè)元素有一個(gè)動(dòng)畫隊(duì)列時(shí)，停止的是當(dāng)前動(dòng)畫，緊接著執(zhí)行下一個(gè)動(dòng)畫
$('#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中:focus選擇器用法,以實(shí)例形式分析了:focus選擇器的功能、定義及匹配獲取焦點(diǎn)元素的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
Backstretch是一款簡(jiǎn)單的jQuery插件，可以幫助你給網(wǎng)頁(yè)添加一個(gè)動(dòng)態(tài)的背景圖片，可以自動(dòng)調(diào)整大小適應(yīng)屏幕的尺寸，當(dāng)然這樣做的缺點(diǎn)是當(dāng)圖片尺寸比屏幕小的時(shí)候,圖片會(huì)因?yàn)樽詣?dòng)延伸而變形，所以我們可以勁量使用高分辨率大尺寸的圖片做背景,更重要的是支持圖片的自動(dòng)切換2015-04-04
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)圖片放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12 
這篇文章主要介紹了提升jQuery的性能需要做好的七件事，希望真的幫助大家提升jQuery性能,需要的朋友可以參考下
2016-01-01 
這篇文章主要介紹了jQuery formValidator表單驗(yàn)證 的相關(guān)資料,需要的朋友可以參考下
2016-01-01 
JQuery Ajax通過(guò)Handler訪問(wèn)外部XML數(shù)據(jù)的代碼
JQuery是一款不錯(cuò)的Javascript腳本框架，相信園子里的很多朋友對(duì)它都不陌生，我們?cè)陂_(kāi)發(fā)Web應(yīng)用程序時(shí)難免會(huì)使用到Javascript腳本，而使用一款不錯(cuò)的腳本框架將會(huì)大大節(jié)省我們的開(kāi)發(fā)時(shí)間， 并可以毫不費(fèi)力地實(shí)現(xiàn)很多非常酷的效果。
2010-06-06 
在jQuery中 關(guān)于json空對(duì)象篩選替換
本篇文章，小編將為大家介紹，在jQuery中 關(guān)于json空對(duì)象篩選替換，有需要的朋友可以參考一下
2013-04-04 
jQuery源碼解讀之a(chǎn)ddClass()方法分析
這篇文章主要介紹了jQuery源碼解讀之a(chǎn)ddClass()方法,注釋形式較為詳細(xì)的分析了addClass()方法的實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02 
jQuery?在圖片和文字中插入內(nèi)容實(shí)例
jQuery是一種流行的JavaScript庫(kù)，可以輕松地在網(wǎng)頁(yè)中插入圖片和文字。通過(guò)使用jQuery的插入功能，您可以在網(wǎng)頁(yè)上動(dòng)態(tài)地添加內(nèi)容，從而提高用戶體驗(yàn)。本文將介紹如何使用jQuery在圖片和文字中插入內(nèi)容，并提供一些實(shí)用的代碼示例。
2023-06-06