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

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

18 голосов
/ 08 января 2011

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

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

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

Ответы [ 6 ]

47 голосов
/ 08 января 2011

Подобный эффект можно получить, уменьшив непрозрачность изображения до 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, который затем можно добавить.

1 голос
/ 08 января 2011

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

1 голос
/ 08 января 2011

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

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

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

0 голосов
/ 06 июля 2016

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

$(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)
    });    
});
0 голосов
/ 08 января 2011

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

<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>
0 голосов
/ 08 января 2011

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...