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