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

【问题标题】：How to fix a jquery .animate margin slider?如何修复 jquery .animate 边距滑块？
【发布时间】：2012-01-05 01:26:18
【问题描述】：

我的网站是：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'});
    }           
          });

它在幻灯片的开头和结尾更改按钮的外观。由于缺乏滑块领域的知识，我以这种方式编码。

我该如何修复它，或者至少防止它点击两次？

【问题讨论】：

这是个好问题。我已经看到这个问题发生了很多次，但我从来没有认为我找到了一个简单的解决方案来解决它。不是没有，只是没找到。

标签： javascript jquery html css slider

【解决方案1】：

为什么不将您的函数包装在一个 if 条件中，以检查滑块是否正在动画？然后它们只会在动画未发生时起作用。

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

【讨论】：