Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Jquery. Изменение background-image (https://javascript.ru/forum/jquery/6588-jquery-izmenenie-background-image.html)

Urfin 08.12.2009 01:24

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

Urfin,
http://javascript.ru/formatting

Urfin 08.12.2009 01:55

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

pilot 23.05.2010 15:33

Цитата:

$(this).animate({background-image:'url(images/round2.gif)'});
если пытаешься через animate, то как известно библиотека изначально не способна анимировать бэкграунд, но это решается посредством установки плагина
http://plugins.jquery.com/project/color

Vivat 06.08.2010 21:49

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

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

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

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

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

digital_sword 06.08.2010 22:00

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

Vivat 06.08.2010 22:09

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

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

Vivat 06.08.2010 22:27

Я так понимаю
<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 06.08.2010 23:24

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 06.08.2010 23:34

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

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


Часовой пояс GMT +3, время: 01:51.