1

Estou criando um JS para executar o código como se fosse 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>

Fiz dois JS na tentativa de fazer com que o slides passem de forma automática (a cada 5s)e que pare a execução automática com o hover do mouse (pode ser na classe .tm-mandato ou no .uk-overlay-hover). De toda forma, ambos os códigos executam automaticamente, mas não param de executar quando tem o hover.

Código 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();

Código 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));
});

Como posso resolver essa questão do hover?

0

1 Resposta 1

2

Considerando o primeiro código, o seletor está errado faltando um ponto . na classe tm-mandato em $('tm-mandato .uk-overlay-hover').hover(....

Mas basta usar apenas a classe da div principal, exatamente a .tm-mandato:

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

Ou apenas na outra:

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

Ou as duas já que uma é filha da outra:

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

No caso aqui só usei na primeira:

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>
<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">
             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>

1
  • Boa! Realmente foi uma grande falta de atenção... rsrs Obrigado pela ajuda @sam 7/12/2018 às 15:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .