61 lines
1.6 KiB
HTML
61 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title></title>
|
|
<meta charset="utf-8" />
|
|
</head>
|
|
|
|
<body>
|
|
<div>
|
|
<span id="fade_in">Fade In</span> |
|
|
<span id="fade_out">Fade Out</span></div>
|
|
<div id="fading_div" style="display:none;height:100px;background:#f00">Fading Box</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
// global varibles
|
|
var done = true,
|
|
fading_div = document.getElementById('fading_div'),
|
|
fade_in_button = document.getElementById('fade_in'),
|
|
fade_out_button = document.getElementById('fade_out');
|
|
|
|
function function_opacity(opacity_value, fade_in_or_fade_out) { // fade_in_or_out - 0 = fade in, 1 = fade out
|
|
fading_div.style.opacity = opacity_value / 100;
|
|
fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
|
|
if (fade_in_or_fade_out == 'in' && opacity_value == 1) {
|
|
fading_div.style.display = 'block';
|
|
}
|
|
if (fade_in_or_fade_out == 'in' && opacity_value == 100) {
|
|
done = true;
|
|
}
|
|
if (fade_in_or_fade_out == 'out' && opacity_value == 1) {
|
|
fading_div.style.display = 'none';
|
|
done = true;
|
|
}
|
|
}
|
|
|
|
// fade in button
|
|
fade_in_button.onclick = function () {
|
|
if (done && fading_div.style.opacity !== '1') {
|
|
done = false;
|
|
for (var i = 1; i <= 100; i++) {
|
|
setTimeout("function_opacity(" + i + ",'in')", i * 5);
|
|
}
|
|
}
|
|
};
|
|
|
|
// fade out button
|
|
fade_out_button.onclick = function () {
|
|
if (done && fading_div.style.opacity !== '0') {
|
|
done = false;
|
|
for (var i = 100; i >= 1; i--) {
|
|
setTimeout("function_opacity(" + i + ",'out')", (i - 100) * -1 * 5);
|
|
}
|
|
}
|
|
};
|
|
alert (test);
|
|
</script>
|
|
</body>
|
|
</html>
|