JQuery中解決重復(fù)動畫的方法
下面我們就來總結(jié)一下幾個JQuery中解決重復(fù)動畫的辦法 ,這里有幾個常見的動畫效果,它們分別是:圖片滾動輪播,回到頁面頂部,聯(lián)級菜單滑出,手風(fēng)琴。
圖片滾動:
$("#banner-min-img1").mouseover(function (){ $("#banner-img").animate({left:"0px"},300)} $("#banner-min-img2").mouseover(function (){ $("#banner-img").animate({left:"-1041px"},300)} $("#banner-min-img3").mouseover(function (){ $("#banner-img").animate({left:"-1990px"},300)}
回到頁面頂部:
$("#goBackTop").click(function (){ $("html,body").animate({scrollTop:0},1000)}
在實(shí)際操作中我們會發(fā)現(xiàn),代碼是非常簡單的,就那么2、3行,但是其中的隊(duì)列控制也讓人不忍直視:
回到頁面頂部,如果你連續(xù)點(diǎn)擊回到頁面頂部多次,那么短時間內(nèi)你就再也沒辦法用滾動條了;
滾動輪播,你指向100次,他就會滾100次才停止!完全不顧及你的感受!
那么如何來解決呢?其實(shí)jquery內(nèi)置了2種方法,一種是stop,一種是在對象后面加上is(:animated),推薦使用后面一種,用上之后,腰也不酸了,動畫也聽話了;代碼
回到頂部,代碼如下:
$("#goBackTop").click(function (){ if(!$("html,body").is(":animated")) {$("html,body").animate({scrollTop:0},1000)} })
最后奉上 最簡潔的 手風(fēng)琴代碼,只有2行:
CSS:
<meta charset="utf-8"> <style> .wrap{ width: 400px; min-height: 550px!important; background: #000; display: block!important; } div{ width: 400px; height: 200px; background: #faf8ff; display: none; overflow: hidden; } p{ width: 400px; height: 50px; line-height:50px; background: #62f1f4; cursor: pointer; border-bottom: 1px solid #eee; color: #777; font-size: 1.3em; font-style: italic; margin: 0; padding: 0; } .dis{ display: block; } </style>
HTML:
<body> <div class="wrap"> <p>Acc</p> <div class="dis">大</div> <p>click me</p> <div>王</div> <p>click me</p> <div>派</div> <p>click me</p> <div>我</div> <p>click me</p> <div>來</div> <p>click me</p> <div>巡</div> <p>click me</p> <div>山</div> </div> </body>
jquery!
<script src="jquery1.9.1.js"></script> <script> $("p").mousedown(function(){ $(this).next("div").slideToggle(); $(this).next("div").siblings("div").slideUp(); }); </script>
希望本文所述對你有所幫助,JQuery中解決重復(fù)動畫的辦法內(nèi)容就給大家介紹到這里了。希望大家繼續(xù)關(guān)注我們的網(wǎng)站!想要學(xué)習(xí)JQuery可以繼續(xù)關(guān)注本站。
- 分享8款優(yōu)秀的 jQuery 加載動畫和進(jìn)度條插件
- jQuery Animation實(shí)現(xiàn)CSS3動畫示例介紹
- jQuery實(shí)現(xiàn)加入購物車飛入動畫效果
- jQuery動畫與特效詳解
- JQuery 動畫卷頁 返回頂部 動畫特效(兼容Chrome)
- 從零開始學(xué)習(xí)jQuery (七) jQuery動畫實(shí)現(xiàn) 讓頁面動起來
- JQuery動畫和停止動畫實(shí)例代碼
- jQuery下的動畫處理總結(jié)
- jquery Ajax 實(shí)現(xiàn)加載數(shù)據(jù)前動畫效果的示例代碼
- 基于JQuery的數(shù)字改變的動畫效果--可用來做計(jì)數(shù)器
相關(guān)文章
深入學(xué)習(xí)jQuery Validate表單驗(yàn)證(二)
這篇文章主要針對jQuery Validate表單驗(yàn)證為大家進(jìn)行詳細(xì)介紹,通過name屬性來關(guān)聯(lián)字段來驗(yàn)證,改變默認(rèn)的提示信息,將校驗(yàn)規(guī)則寫到j(luò)s代碼中,感興趣的小伙伴們可以參考一下2016-01-01jquery實(shí)現(xiàn)彈出div,始終顯示在屏幕正中間的簡單實(shí)例
本篇文章主要是對jquery實(shí)現(xiàn)彈出div,始終顯示在屏幕正中間的簡單實(shí)例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-03-03jQuery.Highcharts.js繪制柱狀圖餅狀圖曲線圖
這篇文章主要介紹了jQuery.Highcharts.js繪制柱狀圖餅狀圖曲線圖的方法,非常的實(shí)用,小伙伴們可以直接拿到項(xiàng)目中使用。2015-03-03分享有關(guān)jQuery中animate、slide、fade等動畫的連續(xù)觸發(fā)、滯后反復(fù)執(zhí)行的bug
這篇文章主要介紹了分享有關(guān)jQuery中animate、slide、fade等動畫的連續(xù)觸發(fā)、滯后反復(fù)執(zhí)行的bug的相關(guān)資料,需要的朋友可以參考下2016-01-01jQuery實(shí)現(xiàn)的選擇商品飛入文本框動畫效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的選擇商品飛入文本框動畫效果,結(jié)合完整實(shí)例形式分析了jQuery動態(tài)操作頁面元素屬性實(shí)現(xiàn)動畫效果的方法,涉及jQuery的事件綁定、元素遍歷及屬性操作等相關(guān)技巧,需要的朋友可以參考下2016-08-08