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

Как изменить background-image с помощью Jquery?
Делаю так:

$("#round2").hover(function() {
	$(this).animate({background-image:'url(images/round2.gif)'});
}, function() {});

пока глухо. Предложения есть?

Бр-р! Какое значение Вы собираетесь анимировать у background-image?

$(this).css('backgroundImage', 'url(…)');

не работает ни

$(this).css({'backgroundImage', 'url(images/round2.gif)'});

ни

$(this).css({'backgroundImage', 'url(http://reklama.rus/themes/garland/images/round1.gif)'});

background-Image писал с черточкой и без

Странно.

<script type="text/javascript" src="/misc/pack.2.js"></script>
<div id="my" style="height: 100px; background: crimson">Наведите на этот див</div>
<script>
$("#my").hover(function(){
$(this).css('backgroundImage', 'url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif)')
})
</script>

digital_sword,
Ах, вот, в чем дело!
Синтаксис:

.css('параметр', 'значение')

или

.css({'параметр': 'значение', 'параметр': 'значение', …});

но не

.css({'параметр', 'значение'});

Спасибо! Работает!
И еще вопрос: сделать срабатывание только на удалении мыши с объекта.
В справке: hover( over, out ). Over. Функция, запускающаяся, когда курсор мыши проходит над соответствующим элементом. А как опять же пользоваться?

$("#round2").hover(function(over) {
 $(this).css('backgroundImage', 'url(/themes/garland/images/round1.gif)');
}, function() {});

не дает результата.
т.е. нужна элементарная смена картинки при наведении и возврат в нач.положении при уведении курсора

Так это, второй параметр у метода hover, а не у функции, которая первый параметр.

<script type="text/javascript" src="/misc/pack.2.js"></script>
<div id="my" style="height: 100px; background: crimson">Наведите на этот див</div>
<script>
$("#my").hover(
	function(){
		$(this).css('backgroundImage', 'url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif)')
	},
	function(){
		$(this).css('backgroundImage', 'none')
	}
);
</script>

Кстати, а Вы уверены, что в Вашем случае нельзя обойтись голым CSS?
Как писал в своем блоге кто-то из разработчиков Оперы,

Спасибо! Работает как надо!
Значит вторая функция в событии описывает действие при завершении действия события? Или нет?
А все-таки, это можно решить аргументами over? Случай ж не единственный, знание аргументов пригодится.
Голый css не сделает плавную смену фона, которую я хочу ввести с функцией animate. И еще jquery у меня и так в этом скрипте используется. Просто пара строк довеска в него.

Здесь это используется.. 1ая функция - onmouseover, 2ая - onmouseout, просто они не подписаны

...и баржа выполняющегося кода при каждом mouseover/mouseout над элементом. Но дело Ваше, хехе.

Вот вариант решения анимации бэкграунда.
Кстати, 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>

Urfin,
http://javascript.ru/formatting

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

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

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

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

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

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

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

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

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

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

Я так понимаю
<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 анимированным сделать нужно лазить по всему интернету и еще ничего не найти )

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

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

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

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

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

Хорошо а как 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>
Да?

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

Vivat, нет! Совсем не так! Ты определись что именно ты хочешь сделать со своими ссылками. fadeIn или fadeOut - это таже анимация только, как:

$(".portfolio").animate({opacity:0},1000)

Вобщем, четко сформулируй задачу и скажи что ИМЕННО надо сделать, а не просто поменять класс или стиль...

Либо вот так делаешь:

<script type="text/javascript" src="/js/jQuery.js"></script>
    <script type="text/javascript">
    $(function(){
        $("#ee").hover(function(){
            var bg = $(".portfolio");
            var bg1 = $(".portfolio_1");
            if (bg1.css("display") == "none"){
                bg.fadeOut(500);
                bg1.fadeIn(500);
            }
            else if (bg.css("display") == "none"){
                bg1.fadeOut(500);
                bg.fadeIn(500);
            }
        })
    });
    </script>
    <style type="text/css">
        .portfolio,.portfolio_1{
            background-image:url("/images/background.png");
            float:left;
            position:absolute;
            top:0;
            z-index:1;
            width:100%;
            height:100%;
            text-align:center;
            font:14px tahoma;
            color:black;
            text-decoration:none;
        }
        .portfolio_1{
            background-image:url("/images/background_1.png");
            display:none;
            z-index:3;
        }
        #ee{
            width:200px;
            height:100px;
            margin:20px;
            position:relative;
        }
    </style>
  <div id="ee">
      <a href="#" class="portfolio">Текст</a>
      <a href="#" class="portfolio_1">Текст</a>
  </div>

либо качаешь плагин и используя документацию и делаешь так как тебе именно надо.

Спасибо, вроде разобрался :yes: :dance: :D

Всем здравствуйте.

У меня такой вопрос - а если необходимо прописывать пути элементов из переменной, как это необходимо прописать? а то что-то у меня пока полный провал.

Заранее спасибо.

У вас не один пример не работает!

на СSS
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;

либо background-position, а в фоне мультик