animate動畫連續執行簡單介紹
關於animate()方法的基本用法可以參閱jQuery animate()一章節。
下面先看一段程式碼例項:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #antzone{ width:80px; height:80px; background:green; position:absolute; top:30px; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bt").click(function(){ $("#antzone").animate({top:"60px"}, 800); }) }); </script> </head> <body> <input type="button" id="bt" value="檢視效果"/> <div id="antzone"></div> </body> </html>
上面的程式碼簡單演示了一下animate()方法的作用。
但是我們有時候想要這樣的效果,那就是再一次點選按鈕,可以繼續動畫方式下移60px。
程式碼修改如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #antzone{ width:80px; height:80px; background:green; position:absolute; top:30px; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bt").click(function(){ $("#antzone").animate({top:"+=60px"}, 800); }) }); </script> </head> <body> <input type="button" id="bt" value="檢視效果"/> <div id="antzone"></div> </body> </html>
上面的程式碼實現了我們的要求,就是修改成js程式碼那種累加形勢即可。
相關文章
- javascript執行順序簡單介紹JavaScript
- jquery動畫佇列簡單介紹jQuery動畫佇列
- 【多執行緒系列】CAS、AQS簡單介紹執行緒AQS
- js程式碼執行順序簡單介紹JS
- javascript程式碼執行機制簡單介紹JavaScript
- jQuery ajax的執行順序簡單介紹jQuery
- js字串連線簡單介紹JS字串
- jQuery常用的動畫函式簡單介紹jQuery動畫函式
- 達夢資料庫執行緒簡單介紹資料庫執行緒
- 執行緒池的介紹及簡單實現執行緒
- jQuery動畫—自定義動畫animate()jQuery動畫
- js使用yield模擬多執行緒的方法簡單介紹JS執行緒
- 如何改變函式的執行上下文簡單介紹函式
- 連結a的download屬性簡單介紹
- Oracle中的外連線簡單介紹(轉)Oracle
- jQuery 動畫 - animate() 方法jQuery動畫
- SVG簡單介紹SVG
- HTML簡單介紹HTML
- ActiveMQ簡單介紹MQ
- HTML 簡單介紹HTML
- JavaScript 簡單介紹JavaScript
- CSS 簡單介紹CSS
- SCSS 簡單介紹CSS
- UICollectionView 簡單介紹UIView
- css簡單介紹CSS
- 廣義多執行緒安全之鎖與iOS鎖簡單介紹執行緒iOS
- js 加號+運算子字串連線簡單介紹JS字串
- 如何不中斷連線保持linux伺服器持續執行 —— screen 使用介紹Linux伺服器
- .net持續整合cake篇之cake介紹及簡單示例
- 自定義動畫方法animate()動畫
- RPC簡單介紹RPC
- Webpack 的簡單介紹Web
- spark簡單介紹(一)Spark
- Flutter key簡單介紹Flutter
- Python簡單介紹Python
- <svg>元素簡單介紹SVG
- Git_簡單介紹Git
- JSON簡單介紹JSON