css background-image крест исчезает

Question

Я работаю над сайтом, который использует плагин nivo-slider. Изображения в ползунке плавно переходят в другое, но я хочу добавить повторяющийся фоновый рисунок, а также добавить этот перекрестный переход к другому шаблону изображения. Я ограничен в том, что я не смог выяснить, как добавить эти фоновые изображения в виде HTML, не нарушая плагин, поэтому я использую свойство background-image в css для изменения фона, но он не исчезает, новый фон просто появится. Использование css переходов не работает на css background-image и не работает, когда я использую jquery .animate или jquery fades. Самое близкое, к чему я пришел, - это постепенное исчезновение, а затем появление, но это не то, что мне нужно, это постепенное исчезновение. Я не смог найти никаких плагинов JavaScript, чтобы сделать это либо.

Итак, в основном мой вопрос: кто-нибудь знает, как постепенно исчезать при изменении свойства background-image элемента css?

Answer 1

Я предлагаю два слоя.

1. Nivo Slider
2. Соседний "помощник" div

Мы только создадим иллюзию перекрестного затухания.

Шаг первый: Слой 1 (ползунок nivo) затухает в новом фоне. После того, как он закончил исчезать, фон перемещается в слой 2 и удаляется из слоя 1. Пользователь не увидит переключатель, поскольку он мгновенный.

Шаг второй: при следующем переходе слой 2 исчезает, а слой 1 исчезает с новым фоном. Как только это будет сделано, переключите фон с слоя 1 на слой 2, установите слой 2 на непрозрачность 100% и удалите фон из слоя 1. Опять же, клиентская сторона не увидит визуальное переключение, так как внешний вид будет выглядеть так же их.

Промыть и повторить.