Restart time with jquery from a website

Question

Restart time with jquery from a website

Navigation

#1 by (1 votes)

1

 $(".intime2").delay(2000).fadeIn(0);

setInterval(function() {
    $('.outtime40').fadeOut(0);
}, 40000);

I need to be able to restart the time by going over a div in a jquery so that the time-delay functions are restarted ... I do not want to do a loop or anything like that, only when the pointer passes over the div that restarts the time.

javascript jquery html

asked by Ivan Soler 01.04.2016 в 02:53

source

1 answer

JavaScript does not work in API 17 and up call a controller inside a test in cakephp

score 1 · Accepted Answer

To restart a setTimeout or setInterval what you have to do is add a handler ( handler in English) where you can clean the delayed function. For this you use the functions clearTimeout and clearInterval respectively.

In your case:

setInterval(function() {
    $('.outtime40').fadeOut(0);
}, 40000);

you should assign the interval to a handler that can be cleaned later:

miIntervalo = setInterval(function() {
    $('.outtime40').fadeOut(0);
}, 40000);

Then when you pass over the div , you first clear the interval and then define it again:

// limpiar intervalo
clearInterval(miIntervalo);

// redefinir intervalo
miIntervalo = setInterval(function() {
    $('.outtime40').fadeOut(0);
}, 40000);

In the case of delay() in jQuery, what you have to do is use stop() and again redefine whatever you want to do. So, when you go over the div the code would look something like this:

$(".intime2").stop(true, true).delay(2000).fadeIn(0);

The first parameter indicates if you want the animation queue to be deleted, and the second indicates whether you want it to skip to the end.

Now put the two together, assuming that your div has the id "myDiv":

$("#miDiv").on("mouseenter", function() {

    // limpiar intervalo 
    clearInterval(miIntervalo);

    // redefinir intervalo
    miIntervalo = setInterval(function() {
        $('.outtime40').fadeOut(0);
    }, 40000);

    $(".intime2").stop(true, true).delay(2000).fadeIn(0);
});