如何修复一个jquery .animate边距滑块

How to fix a jquery .animate margin slider?

本文关键字：animate jquery 一个 何修复      更新时间：2023-09-26

我的网址: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'});
    }           
          });

当按钮位于幻灯片的开始和结束时，它会改变按钮的外观。由于缺乏滑块领域的知识，我这样编码。

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

为什么不将函数包装在if条件中，以检查滑动条是否正在动画?然后，它们将只在动画不发生时工作。

比如if( !$('#slider').is(':animated') ){ ... your code ... }
相关文章：