setTimeout, fade out and go to url

Question

I am trying to create a function that after some time spending on a specific page, without any action of user, it will redirect him into another page, but with a fade out effect. Everything works good, except that the current page doesn't fade out, just simply goes to the new page. here is my code:

setTimeout(function(){
$('body').fadeOut('slow');
window.location.href = "index.html";
}, 6000);

[`fadeOut`](http://api.jquery.com/fadeout/#fadeOut-duration-complete) takes an optional callback function: put the `href` setting in that. — Heretic Monkey, Sep 17 '18 at 22:12

score 2 · Answer 1 · answered Sep 17 '18 at 22:14

Put the location change in a callback to be run after the fadeOut completes.

setTimeout(function(){
    $('body').fadeOut('slow', function() {
        window.location.href = "index.html";
    });
}, 6000);

This might make your setTimeout redundant. You probably just want:

$('body').fadeOut('slow', function() {
    window.location.href = "index.html";
});

score 2 · Accepted Answer · answered Sep 17 '18 at 22:15

The fadeOut method accepts another argument which is a callback function that's executed when the animation is complete, so, you can pass, alongside of the duration argument, a function that contains the redirection statement:

setTimeout(function() {
  $('body').fadeOut('slow', function() {
    window.location.href = "index.html";
  });
}, 6000);

Hope I pushed you further.

score 0 · Answer 3 · answered Sep 17 '18 at 22:15

0

You should use fadeout() in document or html section:

$(document).fadeOut();

or

$("html").fadeOut();

I hope this helps.

answered Sep 17 '18 at 22:15

Fabricio

3,248
2
16
22

setTimeout, fade out and go to url

3 Answers3