jQuery實現的動畫簡單例項
下面介紹一段利用jquery實現的動畫效果,非常的簡單,當然在實際專案中不可能有這麼簡單的應用,不過可供初學者參考一下大致的實現原理,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #thediv { position:relative; width:100px; height:100px; border:1px solid #0050d0; background:#96e555; cursor:pointer; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("#thediv").css("optcity","0.5"); $("#thediv").click(function(){ $(this).animate({ left:"400px", height:"200px", opacity:"1" },300) .animate({ top:"200px", width:"200px" },300) .fadeOut("slow"); }); }) </script> </head> <body> <div id="thediv"></div> </body> </html>
以上程式碼實現了簡單的動畫效果,程式碼比較簡單,這裡就不多介紹了,可以參閱相關閱讀。
相關閱讀:
1.css()函式可以參閱jQuery css()一章節。
2.click事件可以參閱jQuery click事件一章節。
3.animate()函式可以參閱jQuery animate()一章節。
4.fadeOut()函式可以參閱jQuery fadeOut()一章節。
相關文章
- jQuery實現的簡單投票簡單程式碼例項jQuery
- javascript實現的動畫效果簡單例項程式碼JavaScript動畫單例
- jQuery實現的自動播放簡單程式碼例項jQuery
- jQuery實現的生成隨機密碼程式碼例項簡單介紹jQuery隨機密碼
- JavaScript 動畫效果簡單例項程式碼JavaScript動畫單例
- CSS 並不簡單–例項帶你領略實現SVG動畫的姿勢CSSSVG動畫
- CSS 並不簡單--例項帶你領略實現SVG動畫的姿勢CSSSVG動畫
- jQuery實現的禁用右鍵選單程式碼例項jQuery
- 使用jquery實現的清空表單元素程式碼例項jQuery
- jQuery 動畫效果程式碼例項jQuery動畫
- jQuery表單驗證簡單程式碼例項jQuery
- WPF簡單動畫實現動畫
- html實現簡單ListViews效果的例項程式碼HTMLView
- jQuery實現的表單註冊驗證程式碼例項jQuery
- jQuery鏈式呼叫簡單例項程式碼jQuery單例
- jQuery構造物件例項簡單介紹jQuery物件
- jquery自定義事件簡單例項程式碼jQuery事件單例
- jQuery簡單調色器程式碼例項jQuery
- EasyUI實現的form表單提交簡單程式碼例項UIORM
- jQuery實現的tab選項卡程式碼例項jQuery
- jquery實現的選項卡效果例項程式碼jQuery
- canvas實現的簡單餅狀圖程式碼例項Canvas
- canvas實現的簡單塗鴉板程式碼例項Canvas
- css實現的div旋轉簡單程式碼例項CSS
- canvas實現的簡單畫板效果程式碼例項Canvas
- js實現jquery的extend()程式碼例項JSjQuery
- 使用canvas實現簡單動畫Canvas動畫
- jquery簡單計算機功能程式碼例項jQuery計算機
- jquery隨機瀑布流簡單程式碼例項jQuery隨機
- 讓動畫實現更簡單,Flutter 動畫簡易教程!動畫Flutter
- PHP+jQuery開發簡單的翻牌抽獎例項PHPjQuery
- jQuery中動畫的實現jQuery動畫
- jQuery結合ul和li實現的下拉選單例項程式碼jQuery單例
- javascript實現的圖片簡單切換程式碼例項JavaScript
- javascript實現的簡單驗證碼效果程式碼例項JavaScript
- jQuery實現的選項卡的巢狀程式碼例項jQuery巢狀
- jquery實現的分頁效果例項程式碼jQuery
- jQuery實現的隔行變色程式碼例項jQuery