jQuery animate和CSS3相結合實現(xiàn)緩動追逐效果附源碼下載
更新時間:2016年04月18日 10:16:57 作者:ljiong
這篇文章主要介紹了jQuery animate和CSS3相結合實現(xiàn)緩動追逐效果的相關資料,需要的朋友可以參考下
CSS3和jquery都可以實現(xiàn)緩動追逐效果,但是考慮到瀏覽器的兼容性,建議使用jquery animate方法來實現(xiàn)。
先給大家展示下實現(xiàn)效果如下:
引用文件: jquery-1.11.1.min.js
html
<div id="container"> <div id="first"></div> <div id="second"></div> </div>
jquery
var $first=$('#first'); var $second=$('#second'); (function(){ move1(); move2(); })() function move1(){ $first.animate({ "left":220, "top": 0 },400).animate({ "left":220, "top":220 },400).animate({ "left":0, "top":220 },400).animate({ "left":0, "top":0 },function(){ move1(); }) } function move2(){ $second.animate({ "right":220, "bottom": 0 },400).animate({ "right":220, "bottom":220 },400).animate({ "right":0, "bottom":220 },400).animate({ "right":0, "bottom":0 },function(){ move2(); }) }
以上所述是小編給大家介紹的jQuery animate和CSS3相結合實現(xiàn)緩動追逐效果,希望對大家有所幫助!
相關文章
jQuery 網(wǎng)易相冊鼠標移動顯示隱藏效果實現(xiàn)代碼
顯示隱藏效果的實現(xiàn)主要是jquery層選擇器的應用:當鼠標移動經(jīng)過照片就顯示設為封面刪除,移開后就隱藏,此效果在web開發(fā)中經(jīng)常會用到,感興趣的朋友可以參考下哈2013-03-03Struts2的s:radio標簽使用及用jquery添加change事件
用到Struts2的s:radio標簽時想給它添加一個change事件,由于此標簽為頁面自動生成一個radio組,不可以像正常那樣控制,于是想到用jquery來實現(xiàn)2013-04-04jQuery實現(xiàn)轉動隨機數(shù)抽獎效果的方法
這篇文章主要介紹了jQuery實現(xiàn)轉動隨機數(shù)抽獎效果的方法,涉及jQuery操作隨機數(shù)及頁面元素的相關技巧,需要的朋友可以參考下2015-05-05jQuery EasyUI編輯DataGrid用combobox實現(xiàn)多級聯(lián)動
本文給大家分享jQuery EasyUI編輯DataGrid用combobox實現(xiàn)多級聯(lián)動效果的實例代碼,代碼簡單易懂,非常不錯,具有參考借鑒價值,感興趣的朋友一起看看吧2016-08-08