帶有JQuery的滑塊動畫句柄，使用promise的懸停元素問題

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 ），這個promise就會成為問題：它仍然可以解決，但在不便的時刻。 實際上，一旦您執行另一個諸如hideAll的動畫，您就想取消執行已解決的promise之后的代碼。 所以...在繼續進行fadeIn()之前添加一個條件，以查看產品選擇仍然相關。

• runInterval立即調用CycleChange ，這在頁面加載時非常好，但是在將鼠標移到一個點到下一個點時有點煩人：由於鼠標可能退出該區域， 因此會調用runInterval並使選擇跳到另一個點，這讓它有點跳動。 最好刪除對CycleChange的立即調用，然后添加一些代碼以在啟動運行時顯示第一個產品。

• 為了避免不必要的動畫排隊，可以在執行fadeOut()之前調用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上運行。