Сделайте так, чтобы div красиво исчезал по истечении заданного промежутка времени
-
02-07-2019 - |
Вопрос
Каков наилучший способ сделать <div>
исчезает по истечении заданного промежутка времени (без использования некоторых доступных библиотек JavaScript).
Я ищу очень легкое решение, не требующее отправки в браузер огромной библиотеки JavaScript.
Решение
Не уверен, почему вы были бы так против использования чего-то вроде jQuery, что сделало бы достижение этого эффекта практически тривиальным, но, по сути, вам нужно внести ряд изменений в CSS-правила -moz-opacity, непрозрачность и filter: alpha в setTimeout() .
Или используйте jQuery и оберните вызов fadeOut() в setTimeout .Ваш выбор.
Другие советы
Вот какой-нибудь 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>
В наши дни я бы всегда использовал для этого библиотеку - прогресс, которого они достигли, был феноменальным, и одна только кроссбраузерная функциональность того стоит.Так что этот ответ - это не ответ.Я просто хотел бы отметить, что jQuery занимает всего 15 КБ.
Используйте setTimeout с начальным временем для запуска процедуры затухания, а затем используйте setTimeout с низким таймером для пошагового изменения уровня непрозрачности изображения до тех пор, пока оно не исчезнет.
Тем не менее, jQuery может достигать примерно 15 КБ и является одноразовой загрузкой для клиента, поэтому я бы не назвал его огромным.
Попробуйте библиотеку анимации YUI (Yahoo User Interface): http://developer.yahoo.com/yui/animation/
Не изобретайте велосипед заново.Библиотеки - наши друзья.:-)
Я знаю, что у вас не хватает библиотек, но я бы порекомендовал взглянуть на moo.fx: http://moofx.mad4milk.net/ - Я думаю, это примерно 3 тысячи.
jQuery тоже чертовски мал.