jquery - jquery css方法在经常调用时输入错误的值

Question

我正在尝试创建自己的 jquery 图像轮播，以使自己更加熟悉它。

您可以在此处找到示例。

旋转木马的工作原理是向右滑动，最后一个

在第一个之前并将其滑回以隐藏最后一个。

问题是，如果有人向下一个/上一个按钮发送垃圾邮件，则整个轮播会向右移动，如果上一个/下一个每秒使用一次，或者我将其设置为由 jquery 以快速间隔（500）单击，则不会发生这种情况。

代码的相关部分是：

function initUl(){
    var li_width = $('.upper li').outerWidth();
    var upper_width=$('.upper').outerWidth();
    var lower_width=$('.lower').outerWidth();
    var upper_pos = $('.upper').position();
    var lower_pos = $('.lower').position();

    lastBeforeFirst();

    $('.upper').css({'left': upper_pos.left + (-1*li_width)});
    $('.lower').css({'left': lower_pos.left + (-1*li_width)});
    $('.upper').css({'width': upper_width + li_width});
    $('.lower').css({'width': lower_width + li_width});
   }

function moveBothRight(){
    var speed = 200;
    var li_width = $('.upper li').outerWidth();
    var upper_pos = $('.upper').position();
    var lower_pos = $('.lower').position();

    $('.upper').animate({'left' :upper_pos.left + li_width}, speed,fixUpperPosR);
    $('.lower').animate({'left' :lower_pos.left + li_width}, speed,fixLowerPosR);   
   }

   function fixUpperPosR(){
    var li_width = $('.upper li').outerWidth();
    var upper_pos = $('.upper').position();

    $('.upper').css({'left': upper_pos.left - li_width});
    }

    function fixLowerPosR(){
    lastBeforeFirst();
    var li_width = $('.upper li').outerWidth();
    var lower_pos = $('.lower').position();

    $('.lower').css({'left': lower_pos.left - li_width});
     }
     function lastBeforeFirst(){

var first = $('.upper ul li:first');
var last = $('.upper ul li:last');

$(first).before($(last));

first = $('.lower ul li:first');
last = $('.lower ul li:last');
$(first).before($(last));
     }

这段代码负责将所有内容向右移动，并在下次单击时调用它，左侧的唯一区别是

$('.lower').css({'left': lower_pos.left + li_width});

和 firstBeforeLast(); 称呼

这是浏览器的事情（它不能快速更新css），因此我应该限制一个人可以按下按钮的频率，或者我错过了什么？

Answer 1

问题是由于动画是异步运行的。

您需要停止当前动画以及jumpToEnd单击按钮时。

例如：

$('.upper').stop(true, true).animate(...); 

这将导致当前动画立即完成并根据需要更新 css。