jquery - setInterval 和 setTimeout 在悬停时停止在一起

Question

我通过更改背景图像在 setInterval 上制作了一个半径进度条。但是我确实暂停了间隔圆圈以及在圆圈悬停时突出显示的文本。演示 jsbin demo

js代码

$(function(){
var timer = null;
function startSetInterval() {
    var index = 0;
    var index2 = 0;
    var length = $("#opacitySlider").children('div.fadeBuy').length;    
    var length2 = $(".rounder").children('div.rouLine').length; 

    function delayNext() {
        setTimeout(function() {
            $("#opacitySlider div.fadeBuy:eq(" + index + ")").addClass("rollFaDe").siblings().removeClass("rollFaDe");
            index++;
            if (index === length)
                index = 0;
            delayNext();
        }, 7000);
    }    

    function delayNext2() {
        setTimeout(function() {
            $(".rounder div.rouLine:eq(" + index2 + ")").addClass("DrawLineCir").siblings().removeClass("DrawLineCir");
            index2++;
            if (index2 === length2)
                index2 = 0;
            delayNext2();
        }, 7000);
    }

    delayNext();
    delayNext2();


    var Gimages = [
        'https://www.westaustraliawine.com/images/landscape1.jpg', 
        'http://www.ecotourism-greece.com/public/uploads/businesses/Ai-Ianni%20Beach%20(near%20Lefkada%20Town).jpg', 
        'https://www.westaustraliawine.com/images/landscape1.jpg', 
        'http://www.ecotourism-greece.com/public/uploads/businesses/Ai-Ianni%20Beach%20(near%20Lefkada%20Town).jpg',
        'https://www.westaustraliawine.com/images/landscape1.jpg',
    ];
    var Gi = 0;
    $(".rounderInnerContainer").addClass("mountain-1");
    //var templateUrl = "<?php bloginfo('stylesheet_directory'); ?>";
    setInterval(function(){
        $('.rounderInner').css('background-image', function() {
            if (Gi >= Gimages.length) {
                Gi=0;
            }
            return 'url(' + Gimages[Gi++] + ')'; 
        });
        $(".rounderInnerContainer").toggleClass(function(index, className) {
        var s = className.split("mountain-")[1],
            n = s.slice(0, 1);
            return "mountain-" + n + " mountain-" + (n > 5 ? 1 : ++n);
        });
    }, 7000); 
}   
startSetInterval();


});

HTML 片段

<div id="buyingRound">          
<div class="tac SSheading pos-r">               
    <h1 class="Hthin">First Time Home Buyers</h1>               
        <span class="_buyin_rounder_line wow fadeIn"></span>            
</div>          
<div class="rounder">               
    <div class="rouLine rouLine1"></div>                
    <div class="rouLine rouLine2"></div>                
    <div class="rouLine rouLine3"></div>                
    <div class="rouLine rouLine4"></div>                
    <div class="rouLine rouLine5"></div>                
    <div class="rouLine"></div>             
    <div class="rounderInnerContainer"></div>               
    <div class="rounderInner"></div>            
</div>      
<div class="mt20 h100" id="opacitySlider">              
    <div class="rdt rdt1 col-xs-6 pull-right fadeBuy">                  
        <div class="pres-timeline-info pres-timeline-info-5">                       
            <div class="date">
                <h1>How can I get prequalified for a loan?</h1>                         
                <p class="date-para">A good mortgage broker will help you determine how much home you can safely afford, and prequalify you with several lenders well ahead of closing time. We know several excellent mortgage brokers and would be glad to refer you -- just ask!</p>                     
            </div>                  
        </div>              
    </div>              
    <div class="rdt rdt2 col-xs-6 fadeBuy">             
        <div class="pres-timeline-info pres-timeline-info-1">                       
            <div class="date"> 
                <h1>I feel overwhelmed by the home buying process</h1>                          
                <p class="date-para">Although it is complex, the general home-buying process breaks down as follows: identifying your target market, selecting neighborhoods and viewing homes, placing offers and negotiating with sellers, and finally closing the transaction. A good real estate agent will help simplify the process and guide you every step of the way. </p>                     
            </div>                  
        </div>              
    </div>              
    <div class="rdt rdt3 col-xs-6 fadeBuy">                 
        <div class="pres-timeline-info pres-timeline-info-2">                       
            <div class="date">
                <h1>When is a good time to purchase?</h1>                           
                <p class="date-para">Seasonal changes can affect home values, so it's a good idea to be conscious of where the local market is. A good real estate agent will help guide you to buy at the right time for your situation.</p>
            </div>                  
        </div>              
    </div>              
    <div class="rdt rdt4 col-xs-6 fadeBuy">                 
        <div class="pres-timeline-info pres-timeline-info-4">                       
            <div class="date">
                <h1>Should I rent or buy?</h1>                          
                <p class="date-para">Over the long-term, owning your own home builds valuable equity that increases your net worth and sets your family up to retire comfortably. Renting provides no such financial benefits and should be considered a short-term option until home-buying is affordable.</p>                     
            </div>                  
        </div>              
    </div>              
    <div class="rdt rdt5 col-xs-6 fadeBuy">                 
        <div class="pres-timeline-info pres-timeline-info-3">                       
            <div class="date">
                <h1>Link to Communities and Neighborhoods</h1>
            </div>                  
        </div>              
    </div>              
    <div class="fadeBuy"></div>         
</div>      
</div>

Answer 1

尝试类似的东西

function delayNext() {
    $("#opacitySlider div.fadeBuy:eq(" + index + ")").on('hover',function() {
       clearTimeout(t1);
    });
        t1 = setTimeout(function() {
            $("#opacitySlider div.fadeBuy:eq(" + index + ")").addClass("rollFaDe").siblings().removeClass("rollFaDe");
            index++;
            if (index === length)
                index = 0;
            delayNext();
        }, 7000);
    }    

    function delayNext2() {
     $(".rounder div.rouLine:eq(" + index2 + ")").addClass("DrawLineCir").on('hover',function() {
       clearTimeout(t2);
    });
       t2 = setTimeout(function() {
            $(".rounder div.rouLine:eq(" + index2 + ")").addClass("DrawLineCir").siblings().removeClass("DrawLineCir");
            index2++;
            if (index2 === length2)
                index2 = 0;
            delayNext2();
        }, 7000);
    }
delayNext();