I'm trying to do a slideshow of gifs with transparencies where there are actually two images to each slide, one of which has a reflection applied to it. Currently, I'm using the reflection.js found at
http://cow.neondragon.net/stuff/reflection/ and I've tried the jQuery plugin, but it doesn't even seem to apply the reflection.
Unfortunately, in IE, it does some very strange things to the images. The unreflected image actually overlaps the other image and its reflection. Where it overlaps the reflected image, it seems to transition fine. But, in IE (7/8), as the slide is transitioning in, the would-be-visible pixels of the unreflected image that overlap the would-be-visible pixels of the reflection are transparent. While the show pauses, the unreflected image pops fully into view, and then disappears again as it transitions out.
I think it has to do with the fact that both reflection and cycle's opacity adjustments require filters to work in IE, so where the filters overlap, both are opacity=0 or something to that effect. The reason the non-reflection comes into full view when the image is standing still is because the filter for the slide is removed when it's not transitioning. (I've tested the slideshow with the default fade function with the same result, and even with the custom settings everything transitions fine if I don't add the reflection).
Here's the call:
$('.wow').cycle({
fx: 'custom',
cssBefore:{
left: -300,
top: -50,
display: 'block'
},
animIn: {
left: 0,
top: 0,
opacity: 1
},
animOut: {
left: 300,
top: 200,
opacity: 0
},
cssFirst:{
left: 0,
top: 0,
opacity: 1
},
delay:-1000,
speed: 2000,
cleartypeNoBg: true
});
Are there any ideas for making this appear correctly in IE?