如何停止Bootstrap 3.0 Carousel动画队列

问题描述

我希望停止/清除Bootstrap 3.0 Carousel的动画队列.我已经做过一些研究，看来它没有使用jQuery动画.我最初希望在jQuery中使用.stop()方法.我相信会有其他开发商也遇到类似的问题.

I am looking to stop/clear the animation queue for Bootstrap 3.0 Carousel. I have done some research and it looks like it is NOT using jQuery animation. I initially was looking to use the .stop() method in jQuery. I believe there will be other developers with a similar problem.

除了进入Bootstrap代码之外，还有解决此问题的方法吗?要复制该问题，只需将鼠标悬停在图像滑块上即可.您将看到动画已排队，并一直持续到队列为空. 此处是jsfddle上的示例轮播.

Other than going into the Bootstrap code is there a solution to this problem? To duplicate the issue simply hover over the image thumbs rapidly. You will see that the animation is queued and continues until the queue is empty. Here is a sample carousel up on jsfddle.

<!-- HTML SECTION  -->
<!-- A carousel that has 3 preview thumbs-->
<div id="show-carousel-wrapper">
    <div id="show-carousel" class="carousel slide " data-ride="carousel" data-interval="false">
        <div class="ribbon ribbon-md hidden-xs"> <span class="ribbon-md-txt">THIS WEEK</span>

        </div>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active" data-slide-number="0">
                <a href="#">
                    <div class="overlay"></div>
                    <div class="carousel-header">
                        <span class="slide-category">MONDAY 11/11/14</span>
                        <h2>SLIDE 1</h2>
                    </div>
                    <img src="http://placehold.it/300x240" alt="">
                </a>

            </div>
            <div class="item" data-slide-number="1">
                <a href="#">
                    <div class="overlay"></div>
                    <div class="carousel-header">
                        <span class="slide-category">TUESDAY 11/11/14</span>
                        <h2>SLIDE 2</h2>
                    </div>
                    <img src="http://placehold.it/300x240" alt="">
                </a>

            </div>
            <div class="item" data-slide-number="2">
                <a href="#">
                    <div class="overlay"></div>
                    <div class="carousel-header">
                        <span class="slide-category">WEDNESDAY 11/11/14</span>
                        <h2>SLIDE 3</h2>
                    </div>
                    <img src="http://placehold.it/300x240" alt="">
                </a>

            </div>

        </div>
        <!-- /carousel-inner -->
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#show-carousel" role="button" data-slide="prev"></a>
        <a class="right carousel-control" href="#show-carousel" role="button" data-slide="next"></a>

        <!-- /Left and right controls -->
        <ul class="carousel-thumb-wrapper">
            <li class="carousel-thumb selected" data-target="#show-carousel" data-slide-to="0"> <span class="carousel-day">MO</span>
                <img src='http://placehold.it/60x60'>
            </li>
            <li class="carousel-thumb" data-target="#show-carousel" data-slide-to="1"> <span class="carousel-day">TU</span>
                <img src='http://placehold.it/60x60'>
            </li>
            <li class="carousel-thumb" data-target="#show-carousel" data-slide-to="2"> <span class="carousel-day">WE</span>
                <img src='http://placehold.it/60x60'>
            </li>
        </ul>
        <!-- /carousel-thumb-wrapper -->
    </div>
</div>
<!-- /show-carousel-wrapper -->

/* JS SECTION */
$("#show-carousel .carousel-thumb").hover(function (ev) {
    var _this = this;
    updatePreviewThumb(_this);
});
//update preview thumbs
function updatePreviewThumb(this_carousel) {
    var carousel_id = $(this_carousel).attr("data-target");
    var slide_to = parseInt($(this_carousel).attr('data-slide-to'));
    $(carousel_id).find('.carousel-thumb').removeClass('selected');
    $(this_carousel).addClass('selected');
    $(carousel_id).carousel(slide_to);
}

推荐答案

尝试取消回调:

function debounce(func, wait, immediate) {
    var timeout;
    return function () {
        var context = this,
            args = arguments;
        var later = function () {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}

var updatePreviewThumb = debounce(function (this_carousel) {
    var carousel_id = $(this_carousel).attr("data-target");
    var slide_to = parseInt($(this_carousel).attr('data-slide-to'));
    $(carousel_id).find('.carousel-thumb').removeClass('selected');
    $(this_carousel).addClass('selected');
    $(carousel_id).carousel(slide_to);
}, 400);

https://jsfiddle.net/r78j8np5/6/

https://jsfiddle.net/r78j8np5/6/

这篇关于如何停止Bootstrap 3.0 Carousel动画队列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！