С помощью jquery каждые 10 секунд меняйте фоновое изображение div с эффектом затухания.

Question

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

Итак, моя разметка просто:

<div id="header">
    <!--other stuff here...-->
</div>

И мой CSS на данный момент:

#header {
    background:  url('images/header_slides/slide_1.jpg') no-repeat;
}

Итак, теперь я хочу, чтобы через 10 секунд он изменился на

#header {
    background:  url('images/header_slides/slide_2.jpg') no-repeat;
}

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

Answer 1

Я ответил на аналогичный вопрос на Как заполнить окно браузера вращающимся фоновым изображением? .Вы можете исчезать цвета фона, но не фоновые изображения.Ваши изображения должны быть в тегах <img> и по умолчанию скрывать их display:none;.Дайте вашим изображениям position:absolute и z-index:-1, чтобы ваши изображения действовали как фоновые изображения и стояли за всем остальным.

function test() {
    $("img").each(function(index) {
        $(this).hide();
        $(this).delay(10000 * index).fadeIn(10000).fadeOut();
    });
}
test();

Проверьте рабочий пример на http://jsfiddle.net/ewsQ7/5/

Answer 2

С помощью CSS3 можно использовать фоновое изображение с переходами.

Проверьте это на https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Для вашего использования настройте jQuery, чтобы изменить фоновое изображение, но примените стиль перехода с помощью CSS. Каждый раз, когда фон меняется, он будет переходить в соответствии со стилем CSS3.

#header
{
    background: url('images/header_slides/slide_1.jpg') no-repeat;
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
}

Answer 3

Вы не можете исчезнуть фоновое изображение. Но вы можете скрыть слой над #header следующим фоновым изображением ...