Вот вариант решения анимации бэкграунда.
Кстати, 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, ОК, спасибо.
|
Цитата:
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> Да? У каждого класса изображение фона по разному сдвигается |
| Часовой пояс GMT +3, время: 01:03. |