jQuery使用animate實(shí)現(xiàn)ul列表項(xiàng)相互飄動(dòng)效果示例
本文實(shí)例分析了jQuery使用animate實(shí)現(xiàn)ul列表項(xiàng)相互飄動(dòng)效果。分享給大家供大家參考,具體如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> body{font-size:12px;maring:0px;padding:0px;} #main{width:600px;margin:auto;background-color:gold;} ul{float:left;margin:30px;width:80px;height:140px;padding:2px;background-color:#0099cc} #ulRight{margin-left:300px;} li{list-style-type:none;margin-top:3px;background-color:Gray;} </style> <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("li[name='pigeon']").click(function () { //開始飄動(dòng)的位置,由于ulRight的margin-left為300px所以要加300,同理leftUl也一樣 var rightUlLeft = parseInt($("#ulRight").position().left + 300) + "px"; var leftUlLeft = parseInt($("#ulLeft").position().left + 30) + "px"; if ($(this).parent().attr("id") == "ulLeft") { $(this).queue(function (next) { $(this).css({ "position": "absolute", "left": leftUlLeft }); next(); }) .animate({ "left": rightUlLeft }, 2000) .queue(function () { $(this).appendTo("#ulRight").css({ "position": "static" }); $(this).dequeue(); }); } else { $(this).queue(function (next) { $(this).css({ "position": "absolute", "left": rightUlLeft }); next(); }) .animate({ "left": leftUlLeft }, 2000) .queue(function () { $(this).appendTo("#ulLeft").css({ "position": "static" }); $(this).dequeue(); }); } }); }); </script> </head> <body> <div id="main"> <ul id="ulLeft"> <li name='pigeon'>白鴿</li> <li name='pigeon'>花鴿</li> <li name='pigeon'>黑鴿</li> <li name='pigeon'>灰鴿</li> <li name='pigeon'>紅鴿</li> <li name='pigeon'>絳鴿</li> </ul> <ul id="ulRight"> </ul> <div style="clear:both;"></div> </div> </body> </html>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery form操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- JQuery animate動(dòng)畫應(yīng)用示例
- jQuery封裝animate.css的實(shí)例
- jquery animate動(dòng)畫持續(xù)運(yùn)動(dòng)的實(shí)例
- jQuery中animate()的使用方法及解決$(”body“).animate({“scrollTop”:top})不被Firefox支持的問題
- jQuery animate()實(shí)現(xiàn)背景色漸變效果的處理方法【使用jQuery.color.js插件】
- 淺談原生JS實(shí)現(xiàn)jQuery的animate()動(dòng)畫示例
- jQuery實(shí)現(xiàn)立體式數(shù)字動(dòng)態(tài)增加(animate方法)
- jQuery中animate的幾種用法與注意事項(xiàng)
- 利用jQuery的動(dòng)畫函數(shù)animate實(shí)現(xiàn)豌豆發(fā)射效果
- 原生js實(shí)現(xiàn)jquery函數(shù)animate()動(dòng)畫效果的簡單實(shí)例
- 詳解jQuery的animate動(dòng)畫方法及動(dòng)畫排隊(duì)問題解決
相關(guān)文章
jquery實(shí)現(xiàn)刷新隨機(jī)變化樣式特效(tag標(biāo)簽樣式)
本文主要介紹了tag標(biāo)簽隨機(jī)多彩變化的超鏈接樣式,使用JQ+DIV+CSS實(shí)現(xiàn)刷新隨機(jī)變化樣式特效。具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02jQuery EasyUI API 中文文檔 - ValidateBox驗(yàn)證框
jQuery EasyUI API 中文文檔 - ValidateBox驗(yàn)證框,使用jQuery EasyUI的朋友可以參考下。2011-10-10jquery實(shí)現(xiàn)仿Flash的橫向滑動(dòng)菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)仿Flash的橫向滑動(dòng)菜單效果代碼,可實(shí)現(xiàn)滑塊跟隨鼠標(biāo)滑動(dòng)效果的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09jQuery用unbind方法去掉hover事件及其他方法介紹
jquery怎么去掉hover以為直接unbind(hover)就可以搞定,結(jié)果很失敗,接下來介紹下取消hover事件的多種方法,感興趣的你可以參考下哈2013-03-03使用jQuery實(shí)現(xiàn)頁面定時(shí)彈出廣告效果
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)頁面定時(shí)彈出廣告效果,需要的朋友可以參考下2017-08-08jQuery 防止相同的事件快速重復(fù)觸發(fā)方法
下面小編就為大家分享一篇jQuery 防止相同的事件快速重復(fù)觸發(fā)方法。具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02基于MVC5和Bootstrap的jQuery TreeView樹形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合
這篇文章主要介紹了基于MVC5和Bootstrap的jQuery TreeView樹形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合的相關(guān)者,小編推薦使用返回list集合的方法,具體原因大家可以根據(jù)本文學(xué)習(xí)下2016-08-08jQuery對(duì)val和atrr("value")賦值的區(qū)別介紹
jQuery中val和atrr(value),對(duì)瀏覽器的區(qū)別,有默認(rèn)值的情況下,如果用val()賦值了,那么當(dāng)修改這個(gè)值得時(shí)候,google不能獲取最新的值,但是ie可以2014-09-09jQuery中$.get、$.post、$.getJSON和$.ajax的用法詳解
本文重點(diǎn)是來講講jQuery中調(diào)用ajax的4種方法:$.get、$.post、$getJSON、$ajax。如果讀者沒有javascript和jquery的知識(shí),或者沒有ajax的概念,那么請(qǐng)先去問問度娘,再來讀本文。2014-11-11