jquery - jquery - 避免滑块的点击次数增加

Question

我有一个滑块，我想在最后一张幻灯片上停下来（margin-left:-2586px;）。

我使用下面的 jquery 在每张幻灯片之间点击动画（目前只向左移动）。

问题是如果您快速单击#left，滑块将超过-2586px。我怎样才能确保这不会发生？

$('#left').click(function(){
    var left = 862;
    if($('#slider-visible').css('margin-left') == '-2586px'){
    }
    else{
        $('#slider-visible').animate({'margin-left':'-=' + left},500);
    }
});

谢谢！

Answer 1

检查元素是否在动画中间。如果是，请不要再次运行动画。

else{
    if($('#slider-visible:animated').length == 0){
       $('#slider-visible').animate({'margin-left':'-=' + left},500);
    }
}

Answer 2

为什么这是错误的：

$('#left').click(function(){
    var left = 862;
    if($('#slider-visible').css('margin-left') == '-2586px'){
    }
    else{
        $('#slider-visible').animate({'margin-left':'-=' + left},500);
    }
});

不停止动画队列（ using .stop()），并使用-=并尝试使用==来检测确切位置....错误

正确构建的滑块有一个.stop()和一个...
计数器！
动画通常是根据以下内容构建的：

• 元素的数量，
• 点击=增加（减少“上一个”按钮）计数器
• 和动画一样left: - counter*oneSlideWidth
• 这个简单的逻辑将你的计数器重置为 0counter = counter % numberOfSlides
• 另外，您检查计数器是否达到-1(inexistant left slide) 的值而不是您将其设置为的值，numberOfSlides-1然后再次执行：

 $('#slider').stop().animate({left: -counter * slideWidth });

基本滑块逻辑：

var galleryWidth = $('#gallery').width(), 
    counter = 0,
    numberOfSlides = $('#gallery .slides').length;


$('#prev, #next').click(function() {

   if( this.id=='next'){
      counter++;
      counter = counter % numberOfSlides ; // will reset to '0' if both match
   }else{ // prev was clicked
      counter--;
      if(counter==-1){
         counter = numberOfSlides-1 ;
      }
   }

   $('#slider').stop().animate({left: - counter * galleryWidth  }, 700);

});

或者简单地说：

$('#prev, #next').click(function() {      
   var myId = this.id=='next' ? counter++ : counter-- ;
   counter = counter===-1? numberOfslides-1 : counter%numberOfSlides;     
   $('#slider').stop().animate({left: - counter * galleryWidth  }, 700);
});

Answer 3

我认为如果您对此进行测试，它将起作用： var element=$('#left');
else{ $('#slider-visible').animate({element.style.marginLeft=left},500); }