如何防止多次點擊滑塊箭頭，直到完成滑塊動畫

我有一個帶箭頭的滑塊。當我多次點擊這些箭頭時，滑塊會不斷滑動，具體取決於我點擊箭頭的次數。在滑動動畫完成之前，如何防止點擊箭頭？如何防止多次點擊滑塊箭頭，直到完成滑塊動畫

請明白我的意思，我的筆在這裏：上箭頭http://codepen.io/gianaguilar/pen/JGaxKL

嘗試點擊多次，如何滑塊響應。我需要能夠一次滑動一下鼠標。

謝謝！

這裏是jQuery代碼

var $visibleSlide, getDataSlide, sliderInterval, getDataNextSlide, getDataPrevSlide, getDataNavDot; 
var fadeDuration = 1000; 
var pause = 8000; 

//show first slide 
$('.slides li:first-child').css('display', 'block'); 

//show first nav dot 
$('.nav li:first-child').addClass('active-cd'); 

//find out what slide is visible and get its data attribute 
function getSlideInfo() { 
    $visibleSlide = $('.slides').find('li:visible'); 
    getDataSlide = $visibleSlide.data('n'); 
    getDataNextSlide = $visibleSlide.next().data('n'); 
    getDataPrevSlide = $visibleSlide.prev().data('n'); 
} 

//show next slide 
function showNextSlide() { 
    getSlideInfo(); 

    $('.nav li').removeClass('active-cd'); 

    if (getDataSlide < 3) { 
    $visibleSlide.fadeOut(fadeDuration); 
    $visibleSlide.next().fadeIn(fadeDuration); 
    $('.nav li[data-cd=' + getDataNextSlide + ']').addClass('active-cd'); 
    } else { 
    $visibleSlide.fadeOut(fadeDuration); 
    $('.slides li:first-child').fadeIn(fadeDuration); 
    $('.nav li:first-child').addClass('active-cd'); 
    } 
} //end showNextSlide 

function showPrevSlide() { 
    getSlideInfo(); 

    $('.nav li').removeClass('active-cd'); 

    if (getDataSlide > 1) { 
    $visibleSlide.fadeOut(fadeDuration); 
    $visibleSlide.prev().fadeIn(fadeDuration); 
    $('.nav li[data-cd=' + getDataPrevSlide + ']').addClass('active-cd'); 
    } else { 
    $visibleSlide.fadeOut(fadeDuration); 
    $('.slides li:last-child').fadeIn(fadeDuration); 
    $('.nav li:last-child').addClass('active-cd'); 
    } 

} // end showPrevSlide 

// controls 
$('.next').on('click', showNextSlide); 
$('.prev').on('click', showPrevSlide); 

//autoplay 
function startSlider() { 
    sliderInterval = setInterval(showNextSlide, pause) 
} 
startSlider(); 
$('.slideshow').mouseenter(function() { 
    clearInterval(sliderInterval); 
}); 
$('.slideshow').mouseleave(startSlider); 

//control dots clicks 
$('.nav li').on('click', function() { 
    getDataNavDot = $(this).data('cd'); 
    getSlideInfo(); 

    $('.nav li').removeClass('active-cd'); 
    $(this).addClass('active-cd'); 

    $visibleSlide.fadeOut(fadeDuration); 
    $('.slides li[data-n=' + getDataNavDot + ']').fadeIn(fadeDuration); 
}); //end dots click

來源

2016-02-04 Gian Aguilar

直視。是（ '：動畫'） - https://api.jquery.com/animated-selector/ - 和.stop（） - HTTPS：//api.jquery .com/stop/- 如果幻燈片忙碌，基本上會告訴您的上一個和下一個返回 –

一種方法是在特定的時間內禁用點擊事件，讓您的動畫時間完成，然後才允許用戶點擊再次。 [看到這個帖子]（http://stackoverflow.com/questions/32002366/javascript-disable-the-click-event-for-1-second-after-an-id-is-clicked） – crazymatt

您可以定義一個變量isAnimating，當你在一個或下一個幻燈片功能設置爲true，並設置爲false動畫完成時（內回調函數給你的一個淡出功能）。

如果將isAnimating函數設置爲true，則在這些下一個和上一個函數的頂部進行簡單檢查可以防止動畫排隊。

在這裏看到：http://codepen.io/anon/pen/XXPOQY

來源

2016-02-04 20:40:43 Prusprus

太棒了！非常感謝！ –

如何防止多次點擊滑塊箭頭，直到完成滑塊動畫

回答

相關問題