Я намеревался сделать простой переход с плавным переходом между 3 элементами, расположенными друг над другом, используя абсолютное позиционирование и изменяя их непрозрачность с помощью Javascript, но следующий код не работает, как я ожидал, и я не уверен, что почему.
<html>
<head>
<style>
#item0, #item1, #item2 {
opacity: 0.0;
position: absolute;
top: 100px;
left: 100px;
border: 1px solid #000;
height: 200px;
width: 200px;
line-height: 200px;
text-align: center;
vertical-align: middle;
font-size: 26px;
}
#item0 { opacity: 1.0; }
</style>
<script>
var count = 0;
var items;
function init(){
items = document.getElementById("container").getElementsByTagName("div");
setInterval(fade, 5000);
}
function fade(){
fadeElements(items[count], items[(count + 1) % 3]);
count = (count + 1) % 3;
}
function fadeElements(prevItem, nextItem){
prevItem.style.opacity -= 0.1;
nextItem.style.opacity += 0.1;
if(nextItem.style.opacity < 1.0){
setTimeout(function(){fadeElements(prevItem, nextItem)}, 50);
} else {
nextItem.style.opacity = 1.0;
prevItem.style.opacity = 0.0;
}
}
</script>
</head>
<body onload="init();">
<div id="container">
<div id="item0"> 0 </div>
<div id="item1"> 1 </div>
<div id="item2"> 2 </div>
</div>
</body>
</html>
Я думаю, что это как-то связано с использованием + = с element.style.opacity, но Firefox дает мне бесполезные ошибки, а Chrome вообще не дает ошибок.