Question

我的网站是：http://www.grozav.com

我需要帮助修复缩略图滑块部分（Portfolio）的代码。如果有人点击箭头两次，非常快，它会偏离轨道，编码就会停止工作。

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 ... }

这样的东西

如何修复jquery .animate边距滑块？

1 个答案: