Search code examples
javascripthtmlcssfade

Javascript image fade?

I have a basic JavaScript image slideshow which loops through 4 images with a 5 second delay.

Is there any way to make each image fade in as opposed to just appearing instantly? Perhaps using the css3 transition effects??

I don't want to use any pre-made slideshow addons or anything, I am trying to make this myself out of just JavaScript.

Here is a codepen link

Thanks in advance

Solution

  • Here you go: as talked about in previous comments. A jsFiddle that does what you want in Jquery. http://jsfiddle.net/HhpW5/5/ You asked specifically how to change between the divs I do that in this demo simply by using the XOR bitwise operator and concatenating to the prefix: "demo" resulting in: "demo0" or "demo1"

      toggle^=1;

    Everything else is pretty self explanatory with my comments. Hope this helps.