滑块动画处理与JQuery，悬停元素问题使用承诺

Question

我对滑块有问题。对我来说很奇怪，没有一种情况下，它的工作是正确的。当我快速地从一个点到另一个点时，它将不会等到之前的动画结束和两个文本重叠。有更年长更聪明的人能帮我吗？

项目的HTML结构：

<section class="product-section">
<div class="vertical-text vertical-text-custom-5">
    Pluginy
</div>
<div class="carrousel-image-container-1 product-release-management">
    <i class="image-carrousel-1"></i>
</div>
<div class="carrousel-image-container-2 product-SLA">
    <i class="image-carrousel-2"></i>
</div>
<div class="carrousel-image-container-3 product-test-management">
    <i class="image-carrousel-3"></i>
</div>
<div class="col-custom-5">
    <div class="col-custom-7 text-size-xl">
        <div class="text-container-17">
            <div class="product product-release-management">
                <span class="text-color-6 text-weight-thin">Rivet</span> <br>
                <span class="text-color-5 text-weight-bold">Release Management</span> <br>
                <span class="text-color-3 text-weight-bold">plugin</span>
            </div>
            <div class="product product-SLA">
                <span class="text-color-6 text-weight-thin">Rivet</span> <br>
                <span class="text-color-5 text-weight-bold">SLA</span> <br>
                <span class="text-color-3 text-weight-bold">plugin</span>
            </div>
            <div class="product product-test-management">
                <span class="text-color-6 text-weight-thin">Rivet</span> <br>
                <span class="text-color-5 text-weight-bold">Test Management</span> <br>
                <span class="text-color-3 text-weight-bold">plugin</span>
            </div>
        </div>
        <div id="carrousel-dots-contener" class="carrousel-dots text-color-5">
            <div class="dot-container" data-carrousel-dot='dot-1'>
                <div class="dot-border">
                    <div class="dot dot-custom-2">&#9679;</div>
                </div>
            </div>
            <!--
                 -->
            <div class="dot-container" data-carrousel-dot='dot-2'>
                <div class="dot-border">
                    <div class="dot dot-custom-2">&#9679;</div>
                </div>
            </div>
            <!--
                 -->
            <div class="dot-container" data-carrousel-dot='dot-3'>
                <div class="dot-border">
                    <div class="dot dot-custom-2">&#9679;</div>
                </div>
            </div>
        </div>
    </div>
</div>

​

剩下的代码在这里

Answer 1

这些是主要问题：

• 当您确信不需要中断动画时，promise()调用可以正常工作，但是一旦有鼠标事件需要立即操作(如hideAll)，这个承诺将成为一个问题:它仍然会解决，但在一个不方便的时刻。事实上，一旦您做了另一个像hideAll这样的动画，您就想要取消执行按照解析承诺执行的代码。所以..。在继续使用fadeIn()之前添加一个条件，以确保产品选择仍然相关。
• runInterval立即调用cyclicChange，这在页面加载时很好，但当鼠标移动到另一个点时，这有点烦人:由于鼠标可能退出该区域，runInterval会被调用，并将选择跳转到潜在的另一个点，这使其有点不稳定。最好是删除对cyclicChange的直接调用，然后添加一些代码，以便在start运行时显示第一个产品。
• 为了避免不必要的动画队列，您可以在执行stop(true)之前调用fadeOut()。

我将这些更改应用到您的JavaScript代码中，在这些代码中，我还做了一些与问题无关的其他改进：

var carrousel = (function() {

    var interval = null,
        products,
        current = -1;

    products = [
        '.product-release-management',
        '.product-SLA',
        '.product-test-management'
    ];

    function showProduct(id) {
        // Avoid unnecessary work
        if (id == current) return; // nothing to do;
        // In other cases: hide first
        hideAll();
        current = id;
        $('.product').promise().done(function() {
            // Make sure selection is still like at the start of showProduct execution
            if (current === id) $(products[current]).fadeIn(500);
        });
        $("div[data-carrousel-dot='dot-" + (current + 1) + "']").addClass('dot-active');
    }        
    function hideAll() {
        // 1. easier selector for selecting all product classes
        // 2. stop any ongoing animation
        $(products.join(",")).stop(true, true).fadeOut(500); 
        $("div[data-carrousel-dot").removeClass('dot-active');
    }
    function cyclicChange() {
        if ( isNaN(interval) ) return; // timer is not active
        showProduct((current + 1) % products.length); // easier way to roundtrip
    }
    function runInterval(){
        interval = setInterval(cyclicChange, 3000); 
    }
    function mouseOverDotHandler() {
        $('.dot-container').hover(    
            function() {
                // Easier way to get number
                showProduct($(this).index());
            }
        );

        $('#carrousel-dots-contener').hover(
            function(){
                clearInterval(interval);
                interval = null; // use variable for indicating the pause
            },
            runInterval
        );
    }

    return {
        start: function() {
            showProduct(0);
            runInterval();
            mouseOverDotHandler();
        }
    }
})();

$(document).ready(function(){
    carrousel.start();
});

看到它在jsbin.com上运行。