How to add the fadeIn effect in this image transition code

Question

How to add the fadeIn effect in this image transition code

Navigation

#1 by (2 votes)
#2 by (1 votes)

6

I wanted to know how I can add the .fadeIn(500) effect on that system that changes background every 10 seconds.

<script>
    inicial_background = 0;
    function mudar_background(){
        img = new Array();
        img[0] = "style/img/bg_1.jpg";
        img[1] = "style/img/bg_2.jpg";
        document.body.background=img[inicial_background];
        inicial_background++;
        if (inicial_background==img.length){ 
            inicial_background = 0; 
        }
        setTimeout("mudar_background()",10000);
    }
</script>

<body onload="mudar_background();"></body>

jquery

asked by anonymous 07.04.2014 / 05:42

2 answers

1

Try to use the Jquery Backstratch plugin .... it's very simple and does it responsively ...

link

To use it is like this, you download the plugin that is a small file js, send to server and configure it here

<script src="jquery.backstretch.min.js"></script>
<script>
$.backstretch([
      "http://dl.dropbox.com/u/515046/www/outside.jpg" 
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
  ], {duration: 3000, fade: 750});
</script>

07.04.2014 / 06:53

I can not put a subquery inside the IN in PIVOT How to fix the position of an element inside a div with scroll (com css)

score 2 · Accepted Answer

You can use CSS to make the transition ...

Add transition: background-image 500ms; to your CSS file. It is better to add in the CSS file than to add CSS rules via javascript.

If in your case it is <body> that changes the background you can use:

.body{
    transition: background-image 500ms;
}