拖延滑塊動畫並將效果改爲淡入？

Question

我用一個很簡單的JS爲我的滑塊，當前圖像水平滑動，向左或向右取決於所按的箭頭。我遇到的問題是，有上的動畫沒有延遲，所以如果你點擊方向箭頭迅速幾次，它需要一段時間的幻燈片追上並有很多奇怪的重疊。

我想改變動畫效果，淡入淡出，併成立了一個延遲，這樣，直到當前幻燈片做動畫你不能前進到下一個或上一張幻燈片。任何幫助將不勝感激！

var slideInProgress = false; 
var currentSlideIndex = 0, 
slides; 
function setTopSlider(){ 
    if (jQuery('#top_slider #container .slide').length != 0) { 
    slides = jQuery('#top_slider #container > .slide'); 
    for(var i=0; i <= slides.length; i++){ 
     jQuery(slides[i]).css('left','100%'); 
    }; 
    jQuery(slides[currentSlideIndex]).css('left','0%'); 

    var el=jQuery('.dot:eq('+currentSlideIndex+')'); 
    src = el.css("background-image").replace("_off", "_over"); 
    el.css("background-image", src); 
    el.addClass('active'); 
    }; 
}; 

function slide(dir) { 
    var current, next, nextSlide; 
    current = jQuery(slides[currentSlideIndex]); 
    if(!isNaN(dir)){ 
     next = dir; 
     if(next > currentSlideIndex)dir = 'left'; 
     else dir = 'right'; 
    }; 


     if(dir == 'left'){ 
     if(!next){ 
      next = currentSlideIndex + 1; 
      if(next >= slides.length){ 
       next = 0; 
      } 
     } 
if (slideInProgress) { 
    return; 
    } 
    slideInProgress = true; 
     nextSlide = jQuery(slides[next]); 
     nextSlide.css('left','100%'); 
     nextSlide.css('z-index',parseInt(current.css('z-index'), 10)+1); 
     nextSlide.animate({left: '0%'}, 1500); 
     current.animate({left: '-100%'}, 1500); 
     }else{ 
     console.log('moving right'); 
     if(!next){ 
      next = currentSlideIndex - 1; 
      if(next < 0){ 
       next = slides.length-1; 
      } 
     } 
     nextSlide = jQuery(slides[next]); 
     nextSlide.css('left','-100%'); 
     nextSlide.css('z-index',parseInt(current.css('z-index'), 10)+1); 
     nextSlide.animate({left: '0%'}, 1500); 
     current.animate({left: '100%'}, 1500); 
omplete: function(){ 
      slideInProgress = false; 
      }); 
     }; 

    current.addClass('active'); 
    nextSlide.removeClass('active'); 


    var el=jQuery('.dot:eq('+currentSlideIndex+')'); 
    src = el.css("background-image").replace("_over", "_off"); 
    el.css("background-image", src); 
    el.removeClass('active'); 


    el=jQuery('.dot:eq('+next+')'); 
    src = el.css("background-image").replace("_off", "_over"); 
    el.css("background-image", src); 
    el.addClass('active'); 



    console.log('currentSlideIndex'+currentSlideIndex); 
    console.log('next'+next); 
    console.log('dir'+dir); 
    currentSlideIndex = next; 
}; 

Answer 1

我只是使用一些控制變量。

設置一些全局（布爾）變量，指示滑動正在進行中，不容許另一滑動，而上一個正在進行中。

更新：我帶走了您的更新代碼，對代碼中的// **** //進行了一些更改和標記的更改。希望，你會明白的:-)。 （我沒有測試代碼，但它應該工作）。

// **** // 
var slideInProgress = 0; 
// **** // 
var currentSlideIndex = 0, 
     slides; 
function setTopSlider() { 
    if (jQuery('#top_slider #container .slide').length != 0) { 
     slides = jQuery('#top_slider #container > .slide'); 
     for (var i = 0; i <= slides.length; i++) { 
      jQuery(slides[i]).css('left', '100%'); 
     } 
     ; 
     jQuery(slides[currentSlideIndex]).css('left', '0%'); 
     var el = jQuery('.dot:eq(' + currentSlideIndex + ')'); 
     src = el.css("background-image").replace("_off", "_over"); 
     el.css("background-image", src); 
     el.addClass('active'); 
    } 
    ; 
} 
; 
function slide(dir) { 
    // **** // 
    if (slideInProgress != 0) { 
     return; 
    } 
    slideInProgress = 3; 
    // **** // 
    var current, next, nextSlide; 
    current = jQuery(slides[currentSlideIndex]); 
    if (!isNaN(dir)) { 
     next = dir; 
     if (next > currentSlideIndex) 
      dir = 'left'; 
     else 
      dir = 'right'; 
    } 
    ; 
    if (dir == 'left') { 
     if (!next) { 
      next = currentSlideIndex + 1; 
      if (next >= slides.length) { 
       next = 0; 
      } 
     } 
     nextSlide = jQuery(slides[next]); 
     nextSlide.css('left', '100%'); 
     nextSlide.css('z-index', parseInt(current.css('z-index'), 10) + 1); 
     // **** // 
     //nextSlide.animate({left: '0%'}, 1500); 
     nextSlide.animate({ 
      left: '0%' 
     }, { 
      duration: 1500, 
      complete: function() { 
       slideInProgress--; 
      } 
     }); 
     //current.animate({left: '-100%'}, 1500); 
     current.animate({ 
      left: '-100%' 
     }, { 
      duration: 1500, 
      complete: function() { 
       slideInProgress--; 
      } 
     }); 
     // **** // 

    } else { 
     console.log('moving right'); 
     if (!next) { 
      next = currentSlideIndex - 1; 
      if (next < 0) { 
       next = slides.length - 1; 
      } 
     } 
     nextSlide = jQuery(slides[next]); 
     nextSlide.css('left', '-100%'); 
     nextSlide.css('z-index', parseInt(current.css('z-index'), 10) + 1); 
     // **** // 
     //nextSlide.animate({left: '0%'}, 1500); 
     nextSlide.animate({ 
      left: '0%' 
     }, { 
      duration: 1500, 
      complete: function() { 
       slideInProgress--; 
      } 
     }); 
     //current.animate({left: '100%'}, 1500); 
     current.animate({ 
      left: '100%' 
     }, { 
      duration: 1500, 
      complete: function() { 
       slideInProgress--; 
      } 
     }); 
     // **** // 

    } 
    current.addClass('active'); 
    nextSlide.removeClass('active'); 
    var el = jQuery('.dot:eq(' + currentSlideIndex + ')'); 
    src = el.css("background-image").replace("_over", "_off"); 
    el.css("background-image", src); 
    el.removeClass('active'); 
    el = jQuery('.dot:eq(' + next + ')'); 
    src = el.css("background-image").replace("_off", "_over"); 
    el.css("background-image", src); 
    el.addClass('active'); 
    console.log('currentSlideIndex' + currentSlideIndex); 
    console.log('next' + next); 
    console.log('dir' + dir); 
    currentSlideIndex = next; 
    // **** // 
    slideInProgress--; 
    // **** // 
} 

在jQuery animate我用完整回調函數，動畫完成後，這臺slideInPrgress爲false。

或者，您可以設置其他變量，表示某人按下的箭頭，而以前的動畫正在進行中和之後做以前完成該幻燈片。