延遲滑塊動畫並更改效果以淡入淡出？

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動畫中，我使用了完整的回調函數，該函數在動畫完成后將slideInPrgress設置為false。

（可選）您可以設置另一個變量，該變量指示有人在進行上一個動畫時按下了箭頭，並在上一個完成后進行滑動。