Comment faire pour que z-index joue bien avec le plugin jQuery Cycle

Question

Jetez un oeil à l'exemple en bas à droite sur le jQuery Cycle Advanced Demos page.

Remarquez comment quand il boucle la galerie, l'image suivante passe sous la dernière, contrairement à d'autres où l'image suivante couvre toujours la précédente? Eh bien, au moins dans Firefox 3.6.3.

Je développe une animation personnalisée avec le cycle jQuery qui a le même problème. Quand il boucle, l'image suivante passe sous et non plus.

Ceci est mon objet de config Je passe à 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 

} 

Fondamentalement, l'animation est la même que la cover FX, à l'exception de l'image précédente devrait disparaître comme la suivante revient sur le dessus.

Y a-t-il un moyen d'obtenir la prochaine diapositive quand elle boucle pour couvrir la précédente?

Merci

Answer 1

Je suis allé avec une approche hacky, mais il fonctionne ...

$headerImage.find('#gallery ul').cycle({ 
      fx: 'custom', 
      timeout: 5000, 
      easing: 'easeInOutQuad', 
      pause: 1, 
      cssFirst: { 
       zIndex: 1 
      }, 
      cssBefore: { 
       display: 'block', 
       top: -400, 
       left: 0, 
       opacity: 1, 
       zIndex: 1 
      }, 
      animIn: { 
       top: 0,  
       opacity: 1 
      }, 
      animOut: { 
       opacity: .2  
      }, 
      cssAfter: { 
       display: 'none', 
       opacity: .2, 
       zIndex: 0 
      }, 
      delay: -1000, 
      after: function(current, next) { 

      // Had problems when it was looping that the new one wasn't covering the previous one. This hack fixes that. 
     if (next == $headerImage.find('li:last')[0]) { 
      $headerImage.find('li:last').css({ zIndex: -100 }); 
     }; 


      } 

     });