Форум Сайтостроение Веб-строительство

Плавная анимация Background на jQuery

kotor
На сайте с 16.05.2010
Offline
91
kotor
6747

Доброго времени суток всем участником форума, опять прошу совета.

Есть блок, в нем слева форма обратной связи, справа картинка.

Хочу чтобы при успешной отправки сообщения форма плавно пряталась, а картинка плавно сменялась на другую.

В стилях БГ блока указанно так: 

.block{

	background:url(../img/bg_advantages.png) no-repeat right 183px;}

Проблема в том, что не могу сделать именно плавную анимацию. С помощью .animate() меняется все что угодно, кроме БГ.

Где-то вычитал что для анимации БГ нужно подключить расширение jquery.color.js, подключил - безрезультатно.

Изменение БГ работает только так: 

$(".block").attr('class','block_success');

Но тут ни о какой плавности говорить не приходится. Если кто знает как решить эту проблему, подскажите, или дайте линк на статейку. Спасибо.

DiAksID
На сайте с 02.08.2008
Offline
236
DiAksID
#1

- когда изображения для фона в спрайте менять надо/можно не backgrund или backgrund-image, а backgrund-position. это можно реализовать и через css transition, без jquery. но это будет как бе slide а не fade эффект. иногда ооочень подходит, иногда совсем ни к месту;

- можно разместить два блока друг над другом, или поиграть с :after и/или :before с разным backgrund-image и верхнему менять opacity через animate. тогда будет типа эмуляция fade эффекта для фона;

show must go on !!!...
хтмл/css фиксированная верстка, фон Как реализовать смену фона jquery. animate. opacity
AlexandrSG
На сайте с 14.11.2010
Offline
74
AlexandrSG
#2

С фоном можно работать либо добавляя на задний план дополнительный блок либо, как по мне удобнее, сделать спрайт и через скрипт менять position 


$("section.box h2").click(function() {



	$("section.box").css({

		backgroundPosition:'0px 50px',

	});	



});

так как при работе с opacity все эллементы, а не только фон, меняют насыщенность то думаю он не подойдет 🍿

Консультации, Inside/Outside (/ru/forum/809679) оптимизация/продвижение
аналогичный эффект на js Как сделать такую вещь Оценка сайта

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий