I have a snippet to make my page refresh every minute. However, I want the page to fade out to a specific color, then refresh and fade in again. Any easy way to do that?

This is the code I use;

setInterval("refresh();",60000);
 function refresh(){
  window.location = location.href;
 }

I found this code while searching for a solution, but unsure on how I can use this in a interval;

$("body").fadeOut( 
 function(){
  location.reload(true);
 $( document).ready( function(){$(body).fadeIn();}); 
});

I have a snippet to make my page refresh every minute. However, I want the page to fade out to a specific color, then refresh and fade in again. Any easy way to do that?

This is the code I use;

setInterval("refresh();",60000);
 function refresh(){
  window.location = location.href;
 }

I found this code while searching for a solution, but unsure on how I can use this in a interval;

$("body").fadeOut( 
 function(){
  location.reload(true);
 $( document).ready( function(){$(body).fadeIn();}); 
});

• javascript
• jquery

2 Answers 2

DEMO

Add this CSS to hide body on page load.

body{display:none};

Then on load, fade body in.

After 60 seconds fade it out, then trigger page reload by putting it inside the callback that executes after fadeOut finishes.

$(function(){
    $('body').fadeIn(1000);
    setTimeout(function(){
        $('body').fadeOut(1000, function(){
            location.reload(true);
        });
    }, 60000);
});

No need to use setInterval as the page gets reloaded; setTimeout is fine.

You need to do it in a different way:

.hidden {display: none;}

$(document).ready(function () {
  $("body").removeClass("hidden").hide().fadeIn(400);
});

I am not sure how to do it while unloading page. Might not work always.