s24344,
https://learn.javascript.ru/js-animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<style>
div.contentbox {
background: #1C9EFF;
width: 300px;
height: 100px;
padding: 12px;
}
</style>
</head>
<body>
<button onclick="fadeOut('div1')">Fade Out</button>
<button onclick="fadeIn('div1')">Fade In</button>
<div id="div1" class="contentbox"></div>
<p>Content that lives under my box</p>
<script>
var fade = {
fade_in_from: 0,
fade_out_from: 10
}
var fadeOut = function(element) {
var target = document.getElementById(element);
if(getComputedStyle(target, "")["opacity"] == 0) return;
var newSetting = fade.fade_out_from / 10;
target.style.opacity = newSetting;
fade.fade_out_from--;
if (fade.fade_out_from == 0) {
target.style.opacity = 0;
target.style.display = "none";
clearTimeout(loopTimer);
fade.fade_out_from = 10;
return false;
}
var loopTimer = setTimeout('fadeOut(\''+element+'\')', 50);
}
var fadeIn = function(element) {
var target = document.getElementById(element);
if(getComputedStyle(target, "")["opacity"]==1) return;
target.style.display = "block";
var newSetting = fade.fade_in_from / 10;
target.style.opacity = newSetting;
fade.fade_in_from++;
if (fade.fade_in_from == 10) {
target.style.opacity = 1;
clearTimeout(loopTimer);
fade.fade_in_from = 0;
return false;
}
var loopTimer = setTimeout('fadeIn(\''+element+'\')', 50);
}
</script>
</body>
</html>