Как исправить ползунок jquery .animate margin?

Question

Мой веб-сайт: http://www.grozav.com

Мне нужна помощь в восстановлении кода в части ползунка миниатюр (Портфолио).Если кто-то дважды щелкает стрелку, очень быстро, она сбивается с пути и кодирование перестает работать.

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'});
    }           
          });

Это меняет аспект кнопки, когда она находится в начале и в конце слайдов.Я запрограммировал его таким образом из-за недостатка знаний в области ползунков.

Как я могу это исправить или, по крайней мере, предотвратить щелчок дважды?

Answer 1

Почему бы не заключить вашу функцию в условие if, которое проверяет, анимируется ли слайдер? Тогда они будут работать только тогда, когда анимация не происходит.

Что-то вроде if( !$('#slider').is(':animated') ){ ... your code ... }