Fade out background - Simple Jquery

Question

I'm very new to jquery and trying to remove the background of an element. I know this can simply be done with javascript but I want it to fade out which is why I've resulted to jquery.

What I've got so far is:

fadeTo(2000, function(){
    document.html.style.background="black";
})

The html tag is simply:

<html style="background: url(back.png);background-size: cover;">

I suspect I'm not using the "fadeTo" function properly but after looking around it's what was proposed in a website. The jquery website also started the parameters of the "fadeTo" function to be (delay,function)

You have not set which opacity to fade to , e.g., `.fadeTo(2000, 0, completeCallback)` . Requirement could probably be accomplished using `css` ; see also http://stackoverflow.com/questions/30388118/trying-to-make-multiple-background-images-cycle-through-a-slideshow-with-css-and/ — guest271314, Mar 19 '16 at 19:29

score 0 · Answer 1 · answered Mar 19 '16 at 19:37

you have to call the jQuery function fadeTo. Right now you are calling a fadeTo function that probably does not exist.

In addition, the fadeTo function is just used for the opacity of an element.

For example, if you would like to fade out the whole site you would do something like this:

$('body').fadeTo(1000,0);

First you choose which object to do this on $('body'). Read more about this here: jQuery Selectors Secondly, you perform the function fadeTo on the object you have selected. In this case the first parameter is how many milliseconds the fading should last, and the second parameter is to what opacity should it fade to. 0 is invisible, and 1 is fully visible. 0.5 would be half way visible/hidden.

From the code you displayed, it does not seem like you have quite gotten a grasp of what jQuery is all about, so I recommend that you do a little more reading on the subject. Here are a couple of good places to start:

score 0 · Answer 2 · edited May 23 '17 at 10:27

First, you cannot fadeOut the html element - that's the entire web page. And fadeOut() or fadeTo() are not reliable methods to fade a background image.

Instead, use css transitions. Almost as simple as the jQuery, but a bit more typing:

jsFiddle Demo

setTimeout(function(){
  $('#html').css('background-image','url(http://placeimg.com/500/500/nature)');
},2000);

#html{
 background: url(http://placeimg.com/500/500/animals);background-size: cover;
 /* TRANSITION */
 -webkit-transition: background-image 3s;
 -moz-transition: background-image 3s;
 -o-transition: background-image 3s;
 transition: background-image 3s;
}
#inner{width:100%;height:100vh;background:transparent;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="html">
  <div id="inner">
    Simulated page content
  </div>
</div>

Notes:

(1) Example uses a DIV with id="html" only because these demo environments do not allow us to monkey with the html tag.

(2) For some reason, there is a blink at the moment the transition kicks in. Perhaps this is a side-effect of the demo environments. Otherwise, perhaps ask a new question and someone can help understand why / how to remove.

(3) Nothing at all wrong with jQuery - many great reasons to use it over vanilla js

(4) Sources:

CSS3 background image transition

http://api.jquery.com/fadeout/

Fade out background - Simple Jquery

2 Answers2