Need help making transparent transition in slideshow

[wristcutter69]

Thank you Shikkediel for all your help!

[Shikkediel]

Glad you got it working. :-)

[Shikkediel]

Hey… I discovered a mistake in the code that I think I copied. First the element is defined as myImage:

var myImage = document.getElementById('mySlide');

But later it is referred to as mySlide instead. This happens to still work because an id can become a global variable, is what I only discovered last week. But is isn’t really correct to do. So here’s an improved version that I added some other modern support to:

Demo

[Shikkediel]

Maybe the update went unnoticed, @wristcutter69. It also takes better care of the fallback – which is no fading at all. In the old version it would abruptly disappear for a second before the next slide suddenly appeared. Now there’s no interruption when the browser doesn’t support transition.

Would otherwise look like this.

Firefox’s slightly annoying when the images aren’t cached yet by the way.

[wristcutter69]

That update, was superb! It has way better compatability with other browsers :D
Cheers Shikkediel, that was genious!

[Shikkediel]

Always looking for optimisation… so to fully cover every single browser (even those that are very unlikely to visit), you’d want to add a -moz- rule for transition:

img#mySlide {
  -moz-transition: opacity 1s linear;
  -webkit-transition: opacity 1s linear;
  transition: opacity 1s linear;
}

By the way, if you add these properties to the hiding and showing classes instead you’ll be able to define different speeds for fading out and in.

[Author]

Posts