Question

I really have no clue about JS but would need to have a fadeIn effect on my random body background images. Can anyone point me in the right direction please. 

<script type="text/javascript"> 
var totalCount = 5;
function ChangeIt() 
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'images/'+num+'.jpg';
document.body.style.backgroundSize = "cover";
document.body.style.backgroundPosition = "center";
}
</script>

Thank you

Was it helpful?

Solution 2 

<!DOCTYPE html>
<html>
<header>
<script>
$(document).ready(function(){
    $("#image").hide();
    $("#clickIt").click(function(){
        function ChangeIt(){
          var totalCount = 5;
          var num = Math.ceil( Math.random(2) * totalCount );
            return num;
        }
        var speed = ChangeIt();
        $("#Body img").fadeIn(speed, linear);

    });
});
</script>
</header>
<body id="Body">
  <img id="#image" src="../apple.png" alt="img">
  <button id="clickIt"/> go </button>
</body>
</html>

Just to point you in the right direction you can do fadeIn and fadeOut using jquery. Above is an example of what that might look like I'm sure it will be different for your needs but check out the documentation for fadein on jquery's website jquery fadein api

OTHER TIPS

after a few frustrating hours of research, it finally boiled down to the following:
<body>can not have a background image that is transparent therefore it can not fade in either. The solution to my problem was faking it with a white fullscreen div. I added a simple CSS animation fading it from 1.0 to 0.0 opacity.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top