Выцветание фоновых изображений с помощью JavaScript

В отличие от выцветания цвета фона, выцветание фонового изображения не является простой задачей с помощью jQuery. Это связано с тем, что фоновые изображения рассматриваются не как элементы в DOM, а скорее как свойства CSS.

Однако разумным обходным решением является использование тегов с абсолютным позиционированием и отрицательным z-индексом для создания иллюзия фонового изображения. Скрывая эти изображения по умолчанию и постепенно увеличивая их яркость с помощью jQuery, мы можем имитировать эффект затемнения фонового изображения.

Вот как это сделать шаг за шагом:

1. Добавьте теги в свой HTML:

Добавьте по одному тегу для каждого фонового изображения, которое хотите затемнить. Расположите их абсолютно и задайте отрицательный z-индекс, чтобы разместить их позади всех остальных элементов:

img {
  position: absolute;
  z-index: -1;
  display: none;
}

2. Напишите код jQuery:

Используйте метод jQueryeach() для перебора тегов и последовательного их появления и исчезновения. Вот пример:

function fadeImages() {
  $("img").each(function(index) {
    $(this)
      .hide()
      .delay(3000 * index) // delay each image by 3 seconds
      .fadeIn(3000)
      .fadeOut()
  });
}

3. Вызовите функцию:

Вызовите функцию FadeImages(), чтобы запустить процесс затухания.

Для рабочего примера посмотрите живую демонстрацию на http://jsfiddle.net/ РыГКВ/