bednyakovf Сообщение 06/12/2012 22:16 Копия темы
эффект затухания – CSS или JS ? Привет ребята..

Кто может подсказать – возможно ли сделать эффект затухания при помощи одного CSS ?
Или всё же требуется прибегнуть к Juery?
И как это лучше всего организовать?

PS – я имею ввиду к примеру: появляется на сайте новое сообщение – оно тут же выделяется в яркий фон, и через несколько секунд этот фон (подсветка) плавно исчезает..?

Заранее спасибо за помощь...

modi34 Сообщение 06/12/2012 22:23 Копия темы
Это легко реализуемо с помощью css3 – jquery используется только если вам нужна поддержка всех браузеров
hugoware.net/blog/using-c... – пример тыкнул наобум в гугле

modi34 Сообщение 06/12/2012 22:28 Копия темы
ну а в jquery – $('#id').fadeIn( [duration] [, easing] [, callback] )

modi34 Сообщение 06/12/2012 22:34 Копия темы
а вот решение с помощью чистой java – www.switchonthecode.com/t...

yTko Сообщение 06/12/2012 23:03 Копия темы
могу ошибаться, но, мне кажется, что самое простое (но, вероятно, не самое красивое и со своими нюансами) решение на чистом js с css – это найти целевой цвет (фон), найти разницу между текущим и целевым, с нужным шагом (таймаут) приходить к нужному цвету (hex) и в конце удалить блок)
не?)

yTko Сообщение 06/12/2012 23:05 Копия темы
ну хотя это не opacity, да

modi34 Сообщение 06/12/2012 23:12 Копия темы
я разные варианты пробовал) и для меня самое хорошее решение на jquery – тк напрягаться не надо)
а вообще решений в нете миллионы

yTko Сообщение 06/12/2012 23:15 Копия темы
css animation еще
"мой способ" будет фейлом при изображении в качестве фона)

rabbitwindfall Сообщение 07/12/2012 01:53 Копия темы
javascript/css – делает буквально в 10 строк без лишних jquery

duxlab Сообщение 07/12/2012 06:35 Копия темы
солидарен с чистым js. джейквари есть смысль лепить, когда много функций разных и громоздкость окупается. На чистом CSS без смысла: во-первых у большинства скрипты включены, во-вторых эффект чисто косметический и если он не сработает, то никакого ущерба. А шансы не сработать выше пока что у чистого CSS

bednyakovf Сообщение 07/12/2012 08:24 Копия темы
а можно эти 10 строк? ))

Hachabala Сообщение 07/12/2012 09:13 Копия темы
да блин, советчики ё-маё.
Спокойно реализуется на CSS3: transition и opacity, ну или с background, исходя из задачи

bednyakovf Сообщение 07/12/2012 10:06 Копия темы
ну затухание самого DIV понятно
а как сделать затухание его фона?

Hachabala Сообщение 07/12/2012 10:20 Копия темы
.q a {
     background:red;
}
.q a:hover {
     background:transparent;
     transition: background 300ms linear;
}
но в вашем случае нужно привязать к какому-нибудь событию, например когда сообщение уже появилось прицепить класс с transition, но это уже другой вопрос ))

vovikov Сообщение 07/12/2012 10:28 Копия темы
Тогда затухать будет только фон, а может там еще есть шрифт или другие элементы?

vovikov Сообщение 07/12/2012 10:31 Копия темы
И несколько часов трахатся с временными интервалами и отлавливанием багов) И если не ценить свое время.

И будет это уж никак не на 10 строк. Я уже не говорю, какой это ненужный гемор для других раработчиков)

vovikov Сообщение 07/12/2012 10:35 Копия темы
И в каком проценте браузеров это будет работать? 5, 10, 15%

Может лучше так?

.q a:hover
{
background:transparent;
transition: background 300ms linear;
-moz-transition: background 300ms linear; /* Firefox 4 */
-webkit-transition: background 300ms linear; /* Safari and Chrome */
-o-transition: background 300ms linear; /* Opera */
}

Плюс еще нужно костыль написать для ie на том же js)

Hachabala Сообщение 07/12/2012 10:44 Копия темы
естественно, так лучше. Кроссбраузерность я опустил, чтобы автор топика понял направление мысли для решения задачи, в условии которой нет намека на кросбраузерность :)

modi34 Сообщение 07/12/2012 10:50 Копия темы
уважаемый а что вы с ie делать будите?

modi34 Сообщение 07/12/2012 10:52 Копия темы
это я самый простецкий пример привел чтобы человек в нужном направлении сам капать начал – я не давал 100% готового решения

vovikov Сообщение 07/12/2012 10:54 Копия темы
Не понял вопроса?

modi34 Сообщение 07/12/2012 10:56 Копия темы
в internet explorer (ie) версии 8,7,6... ваш код работать не будет

vovikov Сообщение 07/12/2012 11:09 Копия темы
Вобщето я ответил Кирилл Захаров, а не вам)

vovikov Сообщение 07/12/2012 11:11 Копия темы
Вы читать умеете или принципиально не дочитываете до конца

ВНИЗУ НАПИСАНО

Плюс еще нужно костыль написать для ie на том же js)

в 9 осле это свойство также не поддерживается, заявлена поддержка только в ie10

modi34 Сообщение 07/12/2012 11:18 Копия темы
спокойней_) не нервничайте так))
В любом случае ваш код бесполезен – вы цвет блоку не задали)

modi34 Сообщение 07/12/2012 11:25 Копия темы
ааа ну тогда извините – показалось)

vovikov Сообщение 07/12/2012 11:36 Копия темы
Во первых этот код я писал не вам, во вторых я не писал его полностью (это не рабочий пример для данной задачи). В третьих я писал только с целью как применить данной свойство для большего числа браузеров.

PS У вас уже начался словесный понос)

yTko Сообщение 07/12/2012 15:56 Копия темы
я же сказал, что это не opacity)