make the setInterval () stop with mouse hover

Question

make the setInterval () stop with mouse hover

Navigation

#1 by (2 votes)

1

I'm creating a JS to run the code as if it were slides.

    <div class="uk-panel uk-panel-box tm-mandato uk-hidden-small widget_recent_entries">
        <div class="uk-width-1-1 uk-width-medium-1-4 uk-overlay-hover">
            <div class="tm-imagem uk-height-1-1">
                ...
            </div>
        </div>
        <div class="uk-width-1-1 uk-width-medium-1-4 uk-overlay-hover">
            <div class="tm-imagem uk-height-1-1">
                ...
            </div>
        </div>
    </div>

I made two JS in an attempt to make the slides pass automatically (every 5s) and stop auto-execution with the mouse hover (it can be in the .tm-command class or in the .uk-overlay- hover). However, both codes run automatically, but they do not stop running when hover is present.

Code 1:

    var timer;
function startTimer() {
    timer = setInterval(function () {
        var noticia = jQuery('.tm-mandato');
        var controleActive = noticia.find('.uk-active');
        var contadorNoticia = noticia.find('.uk-overlay-hover').length;
        var index = controleActive.index();
        controleActive.removeClass('uk-active');
        if (index < contadorNoticia - 1){
            controleActive.next().addClass('uk-active')
        } else {
            noticia.find('.uk-overlay-hover:first').addClass('uk-active')
        }
    }, 5000);
}
jQuery(document).ready(function($){
    $('tm-mandato .uk-overlay-hover').hover(function (ev) {
        clearInterval(timer);
    }, function (ev) {
        startTimer();
    });
});
startTimer();

Code 2

    jQuery(document).ready(function($){
    var timer = 5000;
    $('.tm-mandato > .uk-overlay-hover').mouseenter(function(ev){
        clearInterval(timer);
    }, setInterval (function(ev){ 
        var noticia = jQuery('.tm-mandato');
        var controleActive = noticia.find('.uk-active');
        var contadorNoticia = noticia.find('.uk-overlay-hover').length;
        var index = controleActive.index();
        controleActive.removeClass('uk-active');
        if (index < contadorNoticia - 1){
            controleActive.next().addClass('uk-active')
        } else {
            noticia.find('.uk-overlay-hover:first').addClass('uk-active')
        }
    }, timer));
});

How can I resolve this hover issue?

javascript html jquery

asked by anonymous 07.12.2018 / 16:03

1 answer

How to trigger this progress bar? Value sum of an array?

score 2 · Accepted Answer

Considering the first code, the selector is wrong missing a point . in class tm-mandato in $('tm-mandato .uk-overlay-hover').hover(... .

But just use the main div class, exactly the .tm-mandato :

$('.tm-mandato').hover(...

Or just the other:

$('.uk-overlay-hover').hover(...

Or both since one is the daughter of the other:

$('.tm-mandato .uk-overlay-hover').hover(...

In the case here I only used the first one:

var timer;
function startTimer() {
    timer = setInterval(function () {
       console.log("rodando");
        var noticia = jQuery('.tm-mandato');
        var controleActive = noticia.find('.uk-active');
        var contadorNoticia = noticia.find('.uk-overlay-hover').length;
        var index = controleActive.index();
        controleActive.removeClass('uk-active');
        if (index < contadorNoticia - 1){
            controleActive.next().addClass('uk-active')
        } else {
            noticia.find('.uk-overlay-hover:first').addClass('uk-active')
        }
    }, 1000);
}
jQuery(document).ready(function($){
    $('.tm-mandato').hover(function (ev) {
       console.log("parou");
        clearInterval(timer);
    }, function (ev) {
        startTimer();
    });
});
startTimer();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="uk-panel uk-panel-box tm-mandato uk-hidden-small widget_recent_entries">
     <div class="uk-width-1-1 uk-width-medium-1-4 uk-overlay-hover">
         <div class="tm-imagem uk-height-1-1">
             passe o mouse para parar
         </div>
     </div>
     <div class="uk-width-1-1 uk-width-medium-1-4 uk-overlay-hover">
         <div class="tm-imagem uk-height-1-1">
             passe o mouse para parar
         </div>
     </div>
 </div>