jQuery自定义函数动画在点击时排队

Question

默认情况下，每隔10秒就会发生一次div旋转。

问题是当用户点击触发相同动画的按钮时，动画的延迟被忽略，每个div重复淡入淡出，如何阻止这种情况发生。

//Quotes rotation
    var quotes = $(".quote");
    var quoteIndex = -1;

    function showNextQuote() {

        $('.quote').css({
            'display' : 'none'
        });

        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(500)
            .delay(10000)
            .fadeOut(500, showNextQuote);
    }

    //Initialize the rotation
    showNextQuote();

    $('.paginate').on('click', function() {
        showNextQuote();
    });

Answer 1

尝试更改

$('.quote').css({
    'display' : 'none'
});

代表

$('.quote').stop(true).hide();

Answer 2

您还可以在已经设置动画时禁用点击事件效果。 这取决于您的需求和背景。