jQuery animate和CSS3相結(jié)合實現(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相結(jié)合實現(xiàn)緩動追逐效果,希望對大家有所幫助!
相關(guān)文章
jquery-easyui關(guān)閉tab自動切換到前一個tab
考慮到用戶體驗,當(dāng)用戶關(guān)閉tab時,自動切換到前一個tab不至于讓用戶看到空的界面。2010-07-07
jQuery 網(wǎng)易相冊鼠標(biāo)移動顯示隱藏效果實現(xiàn)代碼
顯示隱藏效果的實現(xiàn)主要是jquery層選擇器的應(yīng)用:當(dāng)鼠標(biāo)移動經(jīng)過照片就顯示設(shè)為封面刪除,移開后就隱藏,此效果在web開發(fā)中經(jīng)常會用到,感興趣的朋友可以參考下哈2013-03-03
Struts2的s:radio標(biāo)簽使用及用jquery添加change事件
用到Struts2的s:radio標(biāo)簽時想給它添加一個change事件,由于此標(biāo)簽為頁面自動生成一個radio組,不可以像正常那樣控制,于是想到用jquery來實現(xiàn)2013-04-04
jQuery實現(xiàn)轉(zhuǎn)動隨機數(shù)抽獎效果的方法
這篇文章主要介紹了jQuery實現(xiàn)轉(zhuǎn)動隨機數(shù)抽獎效果的方法,涉及jQuery操作隨機數(shù)及頁面元素的相關(guān)技巧,需要的朋友可以參考下2015-05-05
jQuery EasyUI編輯DataGrid用combobox實現(xiàn)多級聯(lián)動
本文給大家分享jQuery EasyUI編輯DataGrid用combobox實現(xiàn)多級聯(lián)動效果的實例代碼,代碼簡單易懂,非常不錯,具有參考借鑒價值,感興趣的朋友一起看看吧2016-08-08

