css中的行間距的代碼
732
2024-10-23
下面我們就來總結一下幾個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="http://www.gimoo.net/t/1811/jquery1.9.1.js"></script>
<script>
$("p").mousedown(function(){
$(this).next("div").slideToggle();
$(this).next("div").siblings("div").slideUp();
});
</script>
希望本文所述對你有所幫助，JQuery中解決重復動畫的辦法內容就給大家介紹到這里了。希望大家繼續關注我們的網站!想要學習JQuery可以繼續關注本站。
