Выполнение после таймера
Сразу показываю код. Необходимо чтобы после того как блок исчезал (opacity), он получал display:none, однако указание после таймера не влияет на это, и блок исчезает одновременно с изменением прозрачности (или даже раньше ее).
Чтобы увидеть достаточно посмотреть на события без строки --- el.style.display='none';
и с --- el.style.display='none';
<html>
<head>
<style>
*{margin:0px;padding:0px;}
#ok {border:1px solid;width:30px;
}
.bottom {background:#b3b3b3;}
</style>
</head>
<body>
<div id="ok">все</div>
<div id="matrix">
<script>for (var i = 0; i < 9000; i++) document.writeln(i)</script>
</div>
<script>
function animate(el) {
var left= 1;
var timer = setInterval(function() {
left-=0.1
el.style.opacity = left;
if(left > 1) clearInterval(timer)
},60)
el.style.display='none'; // ------------- тут проблема
}
var div = document.getElementById('ok');
div.onclick=function() {
animate(this);
}
</script>
</body>
</html>
|