jquery - setInterval and setTimeout stop togather on hover -
i have made radius progress bar on setinterval changing background-image. have pause interval circle text on highlighted on hover of circle. demo jsbin demo
js code
$(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 snippet
<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 prequalified loan?</h1> <p class="date-para">a mortgage broker determine how home can safely afford, , prequalify several lenders ahead of closing time. know several excellent mortgage brokers , glad refer -- 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 home buying process</h1> <p class="date-para">although complex, general home-buying process breaks down follows: identifying target market, selecting neighborhoods , viewing homes, placing offers , negotiating sellers, , closing transaction. real estate agent simplify process , guide every step of 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 time purchase?</h1> <p class="date-para">seasonal changes can affect home values, it's idea conscious of local market is. real estate agent guide buy @ right time 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 rent or buy?</h1> <p class="date-para">over long-term, owning own home builds valuable equity increases net worth , sets family retire comfortably. renting provides no such financial benefits , should considered short-term option until home-buying 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 communities , neighborhoods</h1> </div> </div> </div> <div class="fadebuy"></div> </div> </div>
try similar this
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();