欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery中解決重復(fù)動畫的方法

 更新時間:2016年10月17日 08:51:58   作者:www.chengxuyuans.com  
本篇文章主要介紹了JQuery中解決重復(fù)動畫的辦法,有分別有圖片滾動輪播,回到頁面頂部,聯(lián)級菜單滑出,手風(fēng)琴等效果,有需要的朋友可以來看一下。

下面我們就來總結(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)注本站。

相關(guān)文章

最新評論