Question

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

Answer 1

I went with a hacky approach, but it works…

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


            }

        });