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

Я хочу изменить фоновое изображение с помощью медленной анимации, но его не работает

 $('body').stop().animate({background:'url(1.jpg)'},'slow');

Что-то не так с синтаксисом!

Ответ 1

Вы можете получить аналогичный эффект, уменьшив непрозрачность изображения до 0, затем измените фоновое изображение и, наконец, снова затухайте изображение.

Для этого потребуется div, за всем остальным на вашей странице, который является таким же широким, как и тело.

<body>
    <div id="bg"></div>
    ...
</body>

Вы можете сделать это так же широко, как страница с помощью CSS:

#bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

И затем оживите его свойства.

$('#bg')
    .animate({opacity: 0}, 'slow', function() {
        $(this)
            .css({'background-image': 'url(1.jpg)'})
            .animate({opacity: 1});
    });

Вы можете получить больше эффекта кроссовера, получив второй фоновый div поверх этого, который вы можете затем затухать.

Ответ 2

Из документации jQuery:

свойства, которые не являются числовыми, не могут быть анимированным с помощью основного jQuery функциональность. (Например, ширина, высота или слева могут быть анимированы, но background-color не может быть.)

Источник: http://api.jquery.com/animate/

Ответ 3

Вы не можете анимировать добавление/замену фонового изображения. URL-адрес либо есть, либо нет. Между государством нет.

Ответ 4

Способ достижения этого может состоять в том, чтобы onclick добавить новый класс с фоновым изображением в. Затем оживить это? Или исчезнуть изображение, чтобы открыть новый?

Ответ 5

Я использовал бы faux div, чтобы покрыть фон как фиксированный элемент, а затем оживить этот элемент i.e:

<div id="bgDiv" style='display:none;background:URL("Water lilies.jpg");position:fixed; width: 100%; height: 100%; z-index: -1'></div>
<script type="text/javascript"> 
    $(document).ready(function(){  
        $('#bgDiv').toggle(1000); //You can plugin animate function here.

    }); 
</script>

Ответ 6

Вот как я это сделал:

$(this).animate({
    opacity: 0
}, 100, function() {
    // Callback
    $(this).css("background-image", "url(" + new_img + ")").promise().done(function(){
        // Callback of the callback :)
        $(this).animate({
            opacity: 1
        }, 600)
    });    
});