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: 309

Filed under:
|
|
|
|

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

Related posts about JavaScript

Related posts about jQuery