下面我們就來總結一下幾個JQuery中解決重復動畫的辦法 ,這裡有幾個常見的動畫效果,它們分別是:圖片滾動輪播,回到頁面頂部,聯級菜單滑出,手風琴。
圖片滾動:
$("#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)}
在實際操作中我們會發現,代碼是非常簡單的,就那麼2、3行,但是其中的隊列控制也讓人不忍直視:
回到頁面頂部,如果你連續點擊回到頁面頂部多次,那麼短時間內你就再也沒辦法用滾動條了;
滾動輪播,你指向100次,他就會滾100次才停止!完全不顧及你的感受!
那麼如何來解決呢?其實jquery內置了2種方法,一種是stop,一種是在對象後面加上is(:animated),推薦使用後面一種,用上之後,腰也不酸了,動畫也聽話了;代碼
回到頂部,代碼如下:
$("#goBackTop").click(function (){ if(!$("html,body").is(":animated")) {$("html,body").animate({scrollTop:0},1000)} })
最後奉上 最簡潔的 手風琴代碼,只有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中解決重復動畫的辦法內容就給大家介紹到這裡了。希望大家繼續關注我們的網站!想要學習JQuery可以繼續關注本站。