<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
BODY {
margin: 0px;
}
#y {
background-color: silver;
width: 516px;
height: 666px;
position: absolute;
top: 0px;
z-index: 10;
display: block;
}
</style>
</head>
<body>
<script type="text/javascript">
var t=1;
var i = 0;
function fade() {
i++;
if (i <= 100) {
setTimeout(fade, t);
document.getElementById('y').innerHTML = "i:"+i+"<br />Прозрачность"+(1-i/100);
}
else i=100
}
function fade_out() {
if (i>0) {
i--;
document.getElementById('y').innerHTML = "rfr<br /><br /><br />i:"+i+"<br />Прозрачность"+(1-(i)/100);
setTimeout(fade_out, t);
}
else i=0;
}
</script>
<div id="y" onMouseOver="fade()" onMouseOut="fade_out()"></div>
</body>
</html>
Данный скрипт работает корректно, только если пройдет полный отсчет от 0 до 100. Почему если отвести курсор допустим, когда значение i будет равно 50, то оно не начнет уменьшатся обратно до 0, т. е. событие omMouseOut не рсаботает (точнее оно срабатывает на долю секунды). Поясните пожалуйста что я делаю не так?