How to add the fadein effect to this image transition code

Asked

Viewed 237 times

6

I wanted to know how I can add the effect .fadeIn(500) in this system that exchanges the 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

2 answers

2


You can use CSS to transition...

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

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

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

    Boy, I hadn’t even thought of that =D

  • 1

    But IE doesn’t take Transition only IE10 +

  • 1

    @Josimara, yes, only for IE10+. But the percentages of use of previous ones is very small and will decrease: http://www.w3schools.com/browsers/browsers_explorer.asp

  • 2

    Hopefully, it’s a dream for many, but a much bigger dream is an end for IE hueheueh

1

Try using the Jquery Backstratch plugin.... is very simple and does it in a responsive way...

http://srobbin.com/jquery-plugins/backstretch/

to use it is like this, you download the plugin which is a small file js, send it to the 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>
  • 1

    I will analyze the plugin

  • 1

    But it’s still worth it if someone has a solution of how to use there

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.