Сделайте так, чтобы div красиво исчезал через заданный промежуток времени
Как лучше всего заставить <div> исчезнуть через заданный промежуток времени (без использования некоторых доступных библиотек JavaScript).
Я ищу очень легкое решение, не требующее отправки в браузер огромной библиотеки JavaScript.
15 КБ огромны, для некоторых значений огромны. Зачем использовать 15 КБ, если достаточно 500 байт?
Браузеры @adam кешируют файл, поэтому 15 КБ предназначены только для первого использования. Кроссбраузерные преимущества jQuery намного превосходят разницу в 14,5 тыс.
Хотя я использую библиотеку и не знаю, почему кто-то этого не делает, оригинальный плакат этого не хочет. Не использовать библиотеку - это его выбор, и его вопрос остается в силе независимо от этого. JavaScript сам по себе является допустимым языком. К тому же, может, его клиент этого не допустит, мы не знаем.
Серьезно, вы делаете вывод о намерениях OP не меньше, чем ответы, предлагающие jQuery. Просто опубликуйте лучший ответ, если он у вас есть, и позвольте ОП и голосам решать. Вот как это должно работать.
Кроме того, в jQuery уже размещены предварительно минифицированные версии, на которые вы можете ссылаться, которые, скорее всего, уже будут кэшированы.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
Не уверен, почему вы были бы так против использования чего-то вроде jQuery, которое сделало бы выполнение этого эффекта почти тривиальным, но, по сути, вам нужно обернуть серию изменений в правила -moz-opacity, opacity и filter: alpha CSS. в setTimeout ().
Или используйте jQuery и оберните вызов fadeOut () в setTimeout. Твой выбор.
Другой фанат jQuery проталкивает свою любимую библиотеку кому-то, кто заявил, что не хочет ее использовать ...: P
Зачем изобретать велосипед? Если вам не нравится jquery, используйте scriptaculuos, mootools или что-то еще, что плавает ваша лодка. Глупо изобретать колесо заново.
Не в этом дело - я использую библиотеку (MochiKit). Я хочу сказать, что исходный постер НЕ хотел, чтобы кто-то ответил «используйте библиотеку X» - но что происходит? Все и их мама соглашаются с этим. Не использовать библиотеку - это его выбор, и его вопрос в любом случае остается верным.
ОП сказал, что они не хотят использовать библиотеку, но имеют неправильную логику. В таком случае, я думаю, это верное предложение. Если бы у них была веская причина не использовать библиотеку, все было бы иначе.
Понятно - OP может не знать о реальности некоторых из лучших библиотек, но нам также не следует пытаться читать его мысли - возможно, он просто плохо сформулировал свой вопрос, зная, насколько они малы, но по какой-то причине не могу использовать один.
Мне просто кажется забавным, что всякий раз, когда на этом сайте задают чисто JavaScript-вопрос, фанатики jQuery сразу же отвечают «используйте jQuery!». даже если он не подходит для решения проблемы.
По моему опыту, реальность ответа такова, что вы не найдете «легкого» решения для постепенного исчезновения элемента после задержки, которое будет работать в разных браузерах - концепция «изобретать колесо», безусловно, применима. . Также, честно говоря, он сказал, что не хочет «огромную библиотеку».
Просто игнорируйте Джейсона, в какой-то момент jQuery задел его чувства, и, очевидно, ему нравится делать больше работы, чем необходимо.
В наши дни я бы всегда использовал для этого библиотеку - прогресс, которого они достигли, был феноменальным, и одна кроссбраузерная функциональность того стоит. Так что это не ответ. Я просто хотел бы отметить, что jQuery занимает всего 15 КБ.
Я знаю, что у вас мало библиотек, но я бы рекомендовал взглянуть на moo.fx: http://moofx.mad4milk.net/ - я думаю, что это как 3k.
jQuery тоже чертовски мал.
Используйте setTimeout с начальным временем для запуска процедуры затухания, а затем используйте setTimeout с низким таймером, чтобы шагать через уровень непрозрачности изображения, пока он не исчезнет.
Тем не менее, jQuery может быть уменьшен до 15 КБ и является одноразовой загрузкой для клиента, поэтому я бы не назвал его огромным.
Вот какой-то javascript, который это делает. Я нашел его где-то на веб-сайте учебника по javascript (который мне не удалось найти снова) и изменил его.
var TimeToFade = 200.0;
function fade(eid)
{
var element = document.getElementById(eid);
if (element == null) return;
if (element.FadeState == null)
{
if (element.style.opacity == null || element.style.opacity == ''
|| element.style.opacity == '1') {
element.FadeState = 2;
} else {
element.FadeState = -2;
}
}
if (element.FadeState == 1 || element.FadeState == -1) {
element.FadeState = element.FadeState == 1 ? -1 : 1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
} else {
element.FadeState = element.FadeState == 2 ? -1 : 1;
element.FadeTimeLeft = TimeToFade;
setTimeout("animateFade(" + new Date().getTime()
+ ",'" + eid + "')", 33);
}
}
function animateFade(lastTick, eid)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var element = document.getElementById(eid);
if (element.FadeTimeLeft <= elapsedTicks) {
element.style.opacity = element.FadeState == 1 ? '1' : '0';
element.style.filter = 'alpha(opacity = '
+ (element.FadeState == 1 ? '100' : '0') + ')';
element.FadeState = element.FadeState == 1 ? 2 : -2;
element.style.display = "none";
return;
}
element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft/TimeToFade;
if (element.FadeState == 1) {
newOpVal = 1 - newOpVal;
}
element.style.opacity = newOpVal;
element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}
Следующий HTML-код показывает, как это работает:
<html><head>
<script type = "text/javascript" src = "fade.js"></script>
</head><body>
<div id = "fademe" onclick = "fade( 'fademe' )">
<p>This will fade when you click it</p>
</div>
</body></html>
к сожалению, element.style.opacity не поддерживается постоянно между браузерами. Таблицы, в частности, трудно исчезать и появляться.
Я пробовал этот код - он работает с таблицами в FF3 и Chrome, IE7 просто скрывает элементы, они вообще не исчезают.
Если бы только был способ автоматически обрабатывать все эти кроссбраузерные вещи ... хм ...
Попробуйте библиотеку анимации YUI (пользовательский интерфейс Yahoo): http://developer.yahoo.com/yui/animation/
Не изобретайте велосипед. Библиотеки - наши друзья. :-)
Он не обязательно изобретает велосипед - возможно, ему не нужно все, что может предложить библиотека. Если мне нужна шина, я не покупаю всю машину только для того, чтобы снять с нее одну шину.
jQuery уменьшен до 15 КБ и может обрабатывать это в одной строке. Я не считаю это «огромным».