Have you had a chance to check out the bottom right example on the jQuery Cycle Advanced Demos page? If so, you might have noticed that when the gallery loops, the next image goes underneath the last one instead of covering it up. This seems to be the case in Firefox 3.6.3.
I am currently working on a custom animation using jQuery cycle and I'm facing a similar issue. When the gallery loops, the next image is displayed beneath the previous one instead of on top of it.
Here is the configuration object I am passing to cycle():
{
fx: 'custom',
timeout: 5000,
easing: 'easeInOutQuad',
pause: 1,
cssFirst: {
zIndex: 0
},
cssBefore: {
display: 'block',
top: -500,
opacity: 1,
zIndex: 1
},
animIn: {
top: 0,
opacity: 1
},
animOut: {
opacity: .2
},
cssAfter: {
display: 'none',
opacity: .2,
zIndex: 0
},
delay: -1000
}
Essentially, my animation functions similarly to the cover effect, with the only difference being that the previous image should fade away as the new one comes down on top of it.
Is there a possible way to make the next slide cover the previous one when looping?
Thank you for any assistance!