Анимация фонового изображения

Question

Мне нравится использовать Jquery и его сопутствующий Jquery Ui, но я не могу найти способ анимировать фоновое изображение в течение определенного периода времени, например, 5 секунд. Я не могу сделать что-то вроде:

$('sampleelement').animate({'background-image':'url(hello.jpg)'},5000);

Есть идеи ??

Answer 1

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

<div id='background_img' style='display:none; position:absolute;'><!-- position me behind the content!--><img ... /></div> 
<div id='content'>YDADA</div>

$('#background_img').fadeIn(5000);

Answer 2

Используйте плагин jQuery Background-Position Animations . См. Демоверсию .

Answer 3

Это то, что вам нужно: http://www.ovalpixels.com/bgImageTransition/

Answer 4

Что я сделал на Cheer Us Up используется базовый JavaScript для изменения фонового изображения -

$(function(){
curr = 0;
setTimout(changeBg(),200); 

});

function changeBg() {
curr++;

document.body.style.backgroundPosition = curr + 20;

}

Это основная идея. Я не использовал jquery, потому что просто хотел, чтобы он медленно проходил мимо.

Answer 5

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

Answer 6

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

Answer 7

Почему вы не используете анимированный GIF?