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

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

• javascript
• html
• css
• fade

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked May 7, 2013 at 0:53 Caedan LavenderCaedan Lavender 35411 gold badge33 silver badges1313 bronze badges 2

• CSs opacity, jquery fade, nivoslider – Nhu Trinh Commented May 7, 2013 at 0:55
• 1 Here is another example that you can look at and easily adapt: stackoverflow./questions/16278147/… – Xotic750 Commented May 7, 2013 at 1:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Here you go: as talked about in previous ments. A jsFiddle that does what you want in Jquery. http://jsfiddle/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 ments. Hope this helps.

Try this:-

See Transition

Play around with transtions

#demo {
  background: #969696;
  width: 400px;
  height:300px;
  color: white;
  font-size: 50px;
  font-family: verdana;
  -webkit-transition: background 300ms ease-in 200ms; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 200ms;
    -o-transition: background 300ms ease-in 200ms;
    transition: background 300ms ease-in 200ms;
}