Как анимировать .css('backgroundImage') в jquery?

Question

[Max Shteklya]

Есть ф-ция измены изображения каждые 5 секунд в ней код:

$('#div_for_img').css('backgroundImage', 'url(img/intro/intro_'+n_active+'.jpg)');

Как анимировать изменение фона (что бы выглядело как fadeIn и fadeOut)
P.S. Нужно именно изменение фона а не переделывать всё в img

Answer 1

[dom1n1k]

Напрямую это не сделать никак, потому что к фону нельзя применить opacity отдельно от самого элемента. И аналога прозрачности, как у цвета rgba, у картинок нет.
Всё-таки нужен какой-то вложенный абсолютно спозиционированный элемент. Возможно img, возможно div с фоном, это не так уж важно. И вот уже он будет анимироваться.
Ещё вариант - засунуть в фон canvas и рисовать что-то анимированное на нём... Но это выглядит неоправданно сложно.

Answer 2

[Никита Кит]

Подобное невозможно будет анимировать, даже средствами fadeIn fadeOut, элементарно потому что на каждую картинку будет лететь запрос к серверу и хз как долго сервер будет отвечать. В любом случае скорость у всех разная и тайминга анимаци может просто не хватить.
Самый лучший способ - заабсолють на фоне слайдер, запихай туда дивов и накидай в них bgimage. (я так понимаю вопрос о фоне). В api укажи effect: fade. Все картинки будут подтягиваться сразу и эффект будет чистым, без задержек