指定した時間が経過すると div が適切にフェードアウトするようにします
-
02-07-2019 - |
質問
を作る最良の方法は何ですか <div>
一定の時間が経過するとフェードアウトします (利用可能な JavaScript ライブラリの一部を使用せずに)。
巨大な JavaScript ライブラリをブラウザに送信する必要のない、非常に軽量なソリューションを探しています。
解決
jQuery のようなものを使用すると、この効果を達成するのがほとんど簡単になりますが、本質的には、-moz-opacity、opacity、および filter:alpha CSS ルールに対する一連の変更をラップする必要があります。 setTimeout()内。
または、jQuery を使用し、setTimeout で fadeOut() 呼び出しをラップします。あなたの選択。
他のヒント
これを行う JavaScript をいくつか示します。どこかの JavaScript チュートリアル Web サイトでこれを見つけて (再度見つけることができませんでした)、それを修正しました。
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 はすべて 15kB であることを指摘しておきます。
setTimeout を初期時間とともに使用してフェード ルーチンをトリガーし、setTimeout をロー タイマーとともに使用して、画像の不透明度レベルを段階的に段階的に調整します。
ただし、jQuery は約 15k にまで下がる可能性があり、クライアントのダウンロードは 1 回だけなので、巨大とは言えません。
YUI (Yahoo User Interface) アニメーション ライブラリを試してください。 http://developer.yahoo.com/yui/animation/
車輪の再発明はしないでください。図書館は私たちの友達です。:-)
ライブラリに困っているのはわかりますが、moo.fx を見てみるのをお勧めします。 http://moofx.mad4milk.net/ - 3kくらいだと思います。
jQuery もかなり小さいです。