How to fadeIn and fadeOut an image using javascript

Question

I am creating an image slider in JavaScript and i want to add effects like fadeIn and fadeOut without jQuery.

html:

<body>
<img src="images/1.jpg" alt=""  id="slide" width="700px" height="340px" > 
 </body>

JavaScript:

var slideshow = new Array();

slideshow[0] = new Image();
slideshow[0].src= "images/1.jpg";

slideshow[1] = new Image();
slideshow[1].src= "images/2.jpg";

slideshow[2] = new Image();
slideshow[2].src= "images/3.jpg";


var inc = 0;

function slide(){
document.getElementById('slide').src = slideshow[inc].src;
if(inc<2)
inc++;
else
inc = 0;
setTimeout("slide()",2000);
}
slide();

Have you looked here: stackoverflow.com/questions/13733912/… or here: jsfiddle.net/gabrieleromanato/cMp7s — jcuenod
– jcuenod, Commented May 15, 2015 at 21:54
If i use css animation then it will not work in some browsers. — ProjectAb
– ProjectAb, Commented May 15, 2015 at 21:54

Rob · Accepted Answer · 2015-05-19 12:47:53Z

1

You can't do it with Javascript alone because CSS controls opacity for fading. But there is your clue. Use javascript to control the opacity of the image since, in your comment, you said you don't want to use CSS animation properties and opacity should work in every browser.

edited May 19, 2015 at 12:47

answered May 19, 2015 at 12:34

Rob

15.2k30 gold badges49 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to fadeIn and fadeOut an image using javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related