Как заставить z-index хорошо играть с плагином jQuery Cycle - PullRequest
Новая
       14

Как заставить z-index хорошо играть с плагином jQuery Cycle

1 голос
/ 31 мая 2010

Посмотрите на правый нижний пример на странице jQuery Cycle Advanced Demos .

Обратите внимание, как при зацикливании галереи следующее изображение становится на ниже последнего, в отличие от других, где следующее изображение всегда покрывает предыдущее? Ну хотя бы в Firefox 3.6.3.

Я занимаюсь разработкой пользовательской анимации с циклом jQuery, которая имеет ту же проблему. Когда оно повторяется, следующее изображение исчезает, а не заканчивается.

Это мой объект конфигурации, который я передаю 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

}

По сути, анимация такая же, как у cover fx, за исключением того, что предыдущее изображение должно исчезнуть, когда следующее изображение окажется сверху.

Есть ли способ получить следующий слайд, когда он зацикливается на предыдущем?

Спасибо

1 Ответ

0 голосов
/ 31 мая 2010

Я пошел с хакерским подходом, но это работает ... 

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


            }

        });
...