如何修復jquery .animate margin slider？

我的網站是：http://www.grozav.com 如何修復jquery .animate margin slider？

我需要幫助修復縮略圖滑塊部分（投資組合）的代碼。如果有人點擊箭頭兩次，速度非常快，它就會消失，編碼停止工作。

HTML標記：

<div id="portfolio"> 
    <div id="up-arrow"><a href="#portfolio" title="Slide Up">UP</a></div> 

    <div id="thumbnails"> 
    <div id="slider"> 
       thumbnails go here 
    </div> 
    </div> 
    <div id="down-arrow"><a href="#portfolio" title="Slide Down">DOWN</a></div> 
</div>

的Jquery：

$('#up-arrow a').stop().click(function(){ 
    if($('#slider').css("margin-top")!='0px'){ 
     $('#slider').stop().animate({'margin-top':'+=360px'}) 
     $('#down-arrow').css({'background-position':'0 0px'}) 
     $('#down-arrow a').css({'cursor':'pointer'}) 
     //CHANGE <='PX' VALUE FOR NEXT SLIDE 
     if($('#slider').css("margin-top")<='-360px'){ 
       $('#up-arrow').css({'background-position':'0 -28px'}) 
       $('#up-arrow a').css({'cursor':'help'})  } 
     $('#down-arrow').css({'background-position':'0 0px'}) 
    } 
    else if ($('#slider').css("margin-top")>'0px') { 
     $('#slider').css({'margin-top':'0px'}); 
    }   
      }); 

$('#down-arrow a').stop().click(function(){ 
    if($('#slider').css("margin-top")!='-720px' || $('#slider').css("margin-top")<'-720px'){ 
     $('#slider').stop().animate({'margin-top':'-=360px'}) 
     $('#up-arrow').css({'background-position':'0 0px'}) 
     $('#up-arrow a').css({'cursor':'pointer'}) 
     //CHANGE <='PX' VALUE FOR NEXT SLIDE 
     if($('#slider').css("margin-top")<='-360px'){ 
       $('#down-arrow').css({'background-position':'0 -27px'}) 
       $('#down-arrow a').css({'cursor':'help'})  } 
     $('#up-arrow').css({'background-position':'0 0px'}) 
    } 
    else if ($('#slider').css("margin-top")<'-720px') { 
     $('#slider').css({'margin-top':'-360px'}); 
    }   
      });

它改變了按鍵方面，當它在開始和幻燈片的結束。由於缺乏滑塊領域的知識，我這樣編碼。

我該如何解決這個問題，或者至少要防止它被點擊兩次？

來源

2012-01-04 Alex G.

這是一個很好的問題。我已經看到這個問題發生了很多次，我從來沒有想過我找到了一個簡單的解決方案來解決它。不是說沒有一個，我只是沒有找到它。 – 2012-01-04 17:28:45

爲什麼不把你的函數包裝在if條件中，該條件檢查滑塊是否被動畫？然後，他們只會在動畫未發生時才工作。

類似於if(!$('#slider').is(':animated')){ ... your code ... }

來源

2012-01-04 17:26:18 j08691

哇這實際上工作！謝謝！ – 2012-01-04 17:41:22

如何修復jquery .animate margin slider？

回答

相關問題