Come arrivare a z-index di bel gioco con il plugin jQuery Cycle

Question

Date un'occhiata l'esempio in basso a destra sulla jQuery Cycle avanzata Demos pagina .

Notate come quando loop la galleria, l'immagine successiva va sotto l'ultimo, a differenza di altri in cui l'immagine successiva copre sempre quella precedente? Beh, almeno in Firefox 3.6.3.

sto sviluppando un'animazione personalizzata con il ciclo di jQuery che ha lo stesso problema. Quando loop, l'immagine successiva va sotto al posto di sopra.

Questo è il mio oggetto di configurazione passo a 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

}

Fondamentalmente l'animazione è lo stesso del fx cover, tranne l'immagine precedente dovrebbe svanire come quello successivo scende sopra.

C'è un modo per ottenere la diapositiva successiva quando loop per coprire quella precedente?

Grazie

Answer 1

Sono andato con un approccio hacky, ma funziona ...

$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 });
         };


            }

        });