jQuery animate和CSS3相結(jié)合實(shí)現(xiàn)緩動追逐效果附源碼下載
更新時間：2016年04月18日 10:16:57 作者：ljiong
這篇文章主要介紹了jQuery animate和CSS3相結(jié)合實(shí)現(xiàn)緩動追逐效果的相關(guān)資料,需要的朋友可以參考下
CSS3和jquery都可以實(shí)現(xiàn)緩動追逐效果，但是考慮到瀏覽器的兼容性，建議使用jquery animate方法來實(shí)現(xiàn)。
先給大家展示下實(shí)現(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é)合實(shí)現(xiàn)緩動追逐效果，希望對大家有所幫助！
相關(guān)文章
jQuery實(shí)現(xiàn)條件搜索查詢、實(shí)時取值及升降序排序的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)條件搜索查詢、實(shí)時取值及升降序排序的方法,結(jié)合實(shí)例形式分析了jQuery針對頁面元素屬性操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05
jQuery截取指定長度字符串的實(shí)現(xiàn)原理及代碼
截取指定長度字符串操作在新聞列表這種類型的操作中大量應(yīng)用，下面有個示例，大家可以參考下2014-07-07
隱藏與顯示tr標(biāo)簽的方法有很多，本文使用jquery來實(shí)現(xiàn),需要的朋友可以參考下2014-06-06
jquery實(shí)現(xiàn)帶漸變淡入淡出并向右依次展開的多級菜單效果實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)帶漸變淡入淡出并向右依次展開的多級菜單效果,涉及jquery鼠標(biāo)事件及頁面元素動態(tài)樣式設(shè)置的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
JQuery擴(kuò)展插件Validate 2通過參數(shù)設(shè)置驗證規(guī)則
在前面示例中使用的的方法簡單方便，但沒有完全將js與頁面結(jié)構(gòu)完全分離，也就是說js依賴了class,下面通過validate()方法的參數(shù)設(shè)置驗證規(guī)則將js與頁面結(jié)構(gòu)完全分離2011-09-09
基于jquery的has()方法以及與find()方法以及filter()方法的區(qū)別詳解
本篇文章介紹了，基于jquery的has()方法以及與find()方法以及filter()方法的區(qū)別詳解需要的朋友參考下2013-04-04
客戶端用一個html頁面調(diào)用一個ashx文件（一般http處理程序），返回 json格式的自定義對象2010-04-04
鼠標(biāo)事件是指用戶在移動鼠標(biāo)光標(biāo)或者點(diǎn)擊任意鼠標(biāo)鍵時觸發(fā)的事件,jQuery中封裝了基本上所有的鼠標(biāo)事件包括點(diǎn)擊,雙擊,移動等鼠標(biāo)事件,下面我們就來看下這些事件的語法和用法2015-08-08
這篇文章主要介紹了jQuery調(diào)用ajax請求的常見方法,實(shí)例匯總了三種常見的jQuery調(diào)用Ajax的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jQuery實(shí)現(xiàn)的導(dǎo)航動畫效果(附demo源碼)
這篇文章主要介紹了jQuery實(shí)現(xiàn)的導(dǎo)航動畫效果,可實(shí)現(xiàn)導(dǎo)航條的底部橫條隨鼠標(biāo)移動的效果,涉及jQuery針對鼠標(biāo)事件的響應(yīng)及頁面元素樣式動態(tài)變換的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04