Исчезать фоновое изображение с помощью jQuery?

Question

До сих пор я безуспешно пытался сделать следующее:

<script type="text/javascript">
var x = 0;

while (true) {
    /* change background-image of #slide using some variation
    of animate or fadeIn/fadeOut with or without setTimeout */
    x++;
}
</script>

Есть идеи?

Answer 1

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

Вот краткий пример исчезновения изображений одно за другим.

HTML

<img src=".." />
<img src=".." />

CSS

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

JQuery

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

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

Answer 2

Вы можете исчезать фоновые изображения! и выход!

JQuery:

$('#yourdiv').animate({opacity: 0}, 0).css("background-image", "url(image.jpeg)").animate({opacity: 1}, 2500);

Edit:

Это приведет к исчезновению всего div, а не только фонового изображения.

Answer 3

Хотя вы не можете напрямую добавить background-image. Вы можете добавить одиночный элемент, содержащий только background-image ...

Вот пример

Answer 4

Я попал сюда, потому что искал решение для затухания фоновых изображений на основе изменения опции <select>.Я объединил то, что уже написал, с jsfiddle Хусейна выше и придумал этот jsfiddle.net / v4BMC / .

Первоначально это накладывает два одинаковых изображения друг на друга.Когда <select> изменяется, атрибут стиля верхнего изображения удаляется, src нижнего изображения изменяется, а верхнее изображение исчезает, чтобы показать нижнее.(Верхнее изображение заканчивается символом style="display:none", который необходимо удалить в начале операции, в противном случае это не сработает.)

Надеюсь, что это будет полезно для кого-то другого и не слишком неуместно для включенияздесь!