How to get z-index to play nice with the jQuery plugin Cycle
Posted
by alex
on Stack Overflow
See other posts from Stack Overflow
or by alex
Published on 2010-05-31T01:40:58Z
Indexed on
2010/05/31
1:42 UTC
Read the original article
Hit count: 336
Take a look at the bottom right example on the jQuery Cycle Advanced Demos page.
Notice how when it loops the gallery, the next image goes beneath the last, as opposed to others where the next image always covers the previous one? Well, at least in Firefox 3.6.3.
I'm developing a custom animation with jQuery cycle that has the same problem. When it loops, the next image goes under instead of over.
This is my config object I pass 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
}
Basically the animation is the same as the cover
fx, except the previous image should fade away as the next one comes down on top.
Is there any way to get the next slide when it loops to cover the previous one?
Thanks
© Stack Overflow or respective owner