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);
    }
});

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

正确构建的滑块有.stop()和...
柜台！
动画通常根据以下内容构建：

元素数量
点击=增加（减去＆＃34;之前的＆＃34; 按钮）计数器
和left: - counter*oneSlideWidth
这个简单的逻辑将您的计数器重置为0 counter = counter % numberOfSlides
另外，您检查计数器是否达到-1（不合适的左侧幻灯片）的值，而不是您将其设置为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); }

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

3 个答案: