Question

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.

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);
}

Answer 1

尝试去掉回调：

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/

How to stop Bootstrap 3.0 Carousel Animation Queue

1 个答案: