Jquery. Изменение background-image

[Urfin]

Вот вариант решения анимации бэкграунда.
Кстати, subzey, как Вы делаете, чтобы примеры в сообщении отображались?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div id="my" style="height: 76px; width:336px; background: crimson; position:relative; z-index:0;">
	<div style="position:relative; z-index:2;">Наведите на этот див</div>
	<div id="bg" style="position:absolute; z-index:1; background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif); width:336px; height:76px; top:0; left:0; display:none;"
</div>
<script>
$("#my").hover(
    function(){
        $('#bg').stop(true,true).fadeIn();
    },
    function(){
        $('#bg').stop(true,true).fadeOut();
    }
);
</script>

[subzey]

Urfin,
http://javascript.ru/formatting

[Urfin]

subzey, ОК, спасибо.

[pilot]

$(this).animate({background-image:'url(images/round2.gif)'});

если пытаешься через animate, то как известно библиотека изначально не способна анимировать бэкграунд, но это решается посредством установки плагина
http://plugins.jquery.com/project/color

[Vivat]

А может есть код какой-нибудь который может плавно класс элемента сменить? Или плавный hover...

Что-то типа : <a class="portfolio" href="#"></a>

.portfolio {
background:url(../images/menu.png) no-repeat 0 0;
}

.portfolio:hover {
background-position: 0 -40px;
}

Нужно что б изображение плавно менялось просто...
Знает кто?

[digital_sword]

animate. Плавно меняет стиль элемента.

[Vivat]

Спасибо что ответили. Дело в том что я не знаю jquery

Мне бы какой-нибудь пример <script type='text/javascript'></script>

[Vivat]

Я так понимаю
<script type="text/javascript">
$('#menu').hover(function() {
$('.portfolio').animate({
opacity: 0.25,
}, 1000, function() {
});
});

Только что написать нада что б плавно менялся класс элемента?

Или так:
<script type="text/javascript">
$('#menu').hover(function() {
$('.portfolio').animate(
{ background-position: 0 -40px;
}, 1000, function() {
});
});
</script>

Но так не получается что-то...

Столько всего про этот jquery а элементарно hover анимированным сделать нужно лазить по всему интернету и еще ничего не найти )

[pilot]

Vivat плавно класс поменять не выйдет...Тебе нужно просто поменять стиль, через animate или fadeIn/Out или sladeDown/Up

$('#menu').hover(function() {
$('.portfolio').animate(
{ background-position: 0 -40px;
}, 1000, function() {
});
});

если ты пытаешься сместить бекграунд, включи логику. Тебе нужно смещать марджин за какое-то количество секунд, например:

$('.portfolio').animate({marginLeft: 40px},1000)

И ровно за 1 секунду твой бекграунд сместится(плавно) на 40 пикселей вправо.

[Vivat]

Хорошо а как fadeIn/Out написать?

тогда .portfolio:hover переименую на .portfolio-hover и уже не селектор а класс получился.

у меня такой html:
<div class="menu">
<a class="portfolio" href="#"></a>
<a class="services" href="#"></a>
<a class="contacts" href="#"></a>
</div>

мне для каждого a элемента надо сделать fadeIn/Out

Это как-то так:
<script type="text/javascript">
$('.portfolio').hover(function() {
$('.portfolio').animate({fadeIn/Out},1000)
})
$('.services').hover(function() {
$('.services').animate({fadeIn/Out},1000)
})
})
</script>
Да?

У каждого класса изображение фона по разному сдвигается