<!DOCTYPE html>
<html>
<head>
<title>opacity</title>
<meta charset="utf-8">
<style>
#wrap {
width: 500px;
height: 400px;
outline: 1px solid #ccc;
margin: 0 auto;
padding-top: 100px;
text-align: center;
}
#load1, #load2, #load3, #load4, #load5, #load6, #load {
width: 15px;
height: 10px;
background-color: #ccc;
float: left;
margin-right: 3px;
opacity: 0.30;
}
.clear {
clear: both;
}
#container {
width: 80px;
border: 0px solid #EEE9E9;
/*background-color: #f6f6f6;*/
margin: 0 auto;
padding:0;
overflow: hidden;
display: none;
}
</style>
<script>
// Блоки #load[n] поочерёдно увеличивают и уменьшают прозрачность
var showBlock = 0.2; //Исходное значение прозрачного блока
var hideBlock = 1; //Исходное значение непрозрачного блока
var flag = 0; //для проверки, если блок полностью непрозрачный, то увел-ем прозрачность
var obj; //Текущий объект
var i = 0;
var t; //Таймер
var arr = ['load','load1','load2','load3','load4','load5','lo ad6'];
function showLoad() {
//alert(1);
if (flag == 0) {
//showBlock += 0.13;
showBlock += 0.07;
obj.style.opacity = showBlock;
if (showBlock < 1) {
t = setTimeout(showLoad, 8);
} else {
hideBlock = 1;
showBlock = 0.2;
flag = 1;
}
}
if (flag == 1) {
//hideBlock -= 0.05;
hideBlock -= 0.05;
obj.style.opacity = hideBlock;
if (hideBlock > 0.2) {
t = setTimeout(showLoad, 8);
} else {
//obj.style.opacity = '';
//После того как показали и скрыли один блок
//обнуляем всё что можно и завершаем фунукцию
hideBlock = 1;
showBlock = 0.2;
obj = undefined;
flag = 0;
t = undefined;
return true;
}
}
//hideLoad();
}
function init() {
///alert(arr[i]);
//если нет таймера запускаем функцию ещё раз
if (!t) {
obj = document.getElementById(arr[i]);
showLoad();
setTimeout(init, 450);
i ++;
//obj.style.marginLeft = w + 'px';
if ( i == 4) { //
i = 0;
w = 0;
}
}
}
function start() {
document.getElementById('container').style.display = 'block';
init();
}
</script>
</head>
<body>
<div id="wrap">
<div id="container">
<div id="load"></div>
<div id="load1"></div>
<div id="load2"></div>
<div id="load3"></div>
<!--
<div id="load4"></div>
<div id="load5"></div>
<div id="load6"></div>
-->
</div>
<div class="clear"></div>
</div>
<input type="button" onclick="document.getElementById('container').styl e.display = 'block'; init()" value="Start">
</body>
</html>
Велосипед, подобие анимации!
Думаю можно это сохранить в файл и запустить, ещё добавить кроссбр-ть, opacity в ИЕ неработает, в Мозиле норм. (-;