How do I add a fade effect to this Javascript slideshow?

Question

The below image slideshow script works as intended in that it cycles through an array of images with an optional anchor link and description.

Now I would like to improve this script by adding a fade in/out effect. Any help is greatly appreciated.

Thank you in advance.

<script language="JavaScript1.2">
  var variableslide = new Array()

  variableslide[0] = ['image1.jpg', 'link here', 'description']
  variableslide[1] = ['image2.jpg', 'link here', 'description']
  variableslide[2] = ['image3.jpg', 'link here', 'description']

  var slidewidth = '600px'
  var slideheight = '250px'
  var slidebgcolor = '#FFFFFF'

  var slidedelay = 3000

  var ie = document.all
  var dom = document.getElementById

  for (i = 0; i < variableslide.length; i++) {
    var cacheimage = new Image()
    cacheimage.src = variableslide[i][0]
  }

  var currentslide = 0

  function rotateimages() {
    contentcontainer = '<center>'
    if (variableslide[currentslide][1] != "")
      contentcontainer += '<a href="' + variableslide[currentslide][1] + '">'
    contentcontainer += '<img src="' + variableslide[currentslide][0] + '" border="0" vspace="3">'
    if (variableslide[currentslide][1] != "")
      contentcontainer += '</a>'
    contentcontainer += '</center>'
    if (variableslide[currentslide][2] != "")
      contentcontainer += variableslide[currentslide][2]

    if (document.layers) {
      crossrotateobj.document.write(contentcontainer)
      crossrotateobj.document.close()
    } else if (ie || dom)
      crossrotateobj.innerHTML = contentcontainer
    if (currentslide == variableslide.length - 1) currentslide = 0
    else currentslide++
      setTimeout("rotateimages()", slidedelay)
  }

  if (ie || dom)
    document.write('<div id="slidedom" style="width:' + slidewidth + ';height:' + slideheight + ';     background-color:' + slidebgcolor + '"></div>')

  function start_slider() {
    crossrotateobj = dom ? document.getElementById("slidedom") : ie ? document.all.slidedom : document.slidensmain.document.slidenssub
    if (document.layers)
      document.slidensmain.visibility = "show"
    rotateimages()
  }

  if (ie || dom)
    start_slider()
  else if (document.layers)
    window.onload = start_slider
</script>
<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide>
  <layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer>
</ilayer>

Answer 1

What you want to do is programatically decrease the opacity property of the image DOM object to fade out whilst simultaneously increasing the opacity of the image to fade in. You start the image to fade in at 0 opacity and work your way up.

I found an example for you using straight JavaScript with no jQUery or other frameworks based on your code style - see how you go with http://tech.pro/tutorial/725/javascript-tutorial-simple-fade-animation

Answer 2

Can you use jQuery? They already have fadeIn and fadeOut where you can set various properties, one being the duration in milliseconds (to determine how long it will last).

http://api.jquery.com/fadeIn/

If you must use plain JS then it gets a little more complicated. Do you need to be compatible with older browsers?

The easiest way to do it would be to setInterval and then step down the opacity to 0 but not all browsers/versions have support for opacity.