Как заставить z-index хорошо работать с плагином jQuery Cycle
-
05-10-2019 - |
Вопрос
Взгляните на нижний правый пример на Страница расширенных демонстраций jQuery Cycle.
Обратите внимание, как когда галерея зацикливается, следующее изображение появляется под последнее, в отличие от других, где следующее изображение всегда закрывает предыдущее?Ну, по крайней мере, в 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, за исключением того, что предыдущее изображение должно исчезнуть, когда следующее опустится сверху.
Есть ли способ получить следующий слайд, когда он зацикливается на предыдущем?
Спасибо
Решение
Я использовал хакерский подход, но он работает...
$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 });
};
}
});