Показать сообщение отдельно
  #1 (permalink)  
Старый 28.07.2011, 21:56
Аспирант
Отправить личное сообщение для qwertyuiop Посмотреть профиль Найти все сообщения от qwertyuiop
 
Регистрация: 02.06.2011
Сообщений: 71

как тормознуть функцию до завершения предыдушей?
<html>
<head>
<title></title>
<style type="text/css">
<!--
.m { 
background-color: #0000ff;
color: #ffffff;
font-size: 10px;
padding: 0;
height:30px;
text-align: center;
white-space: nowrap;
width: 300px;
 }
.menu {
background-color: #0000ff;
height:30px;
width: 300px;
}
-->
</style>
</head>
<body>
<div class="m">
<div onMouseOver="animate('1')" onMouseOut="animate2('1')" id="1" class="menu">
ляля
</div>
</div>
<div class="m">
<div onMouseOver="animate('2')" onMouseOut="animate2('2')" id="2" class="menu">
ляля
</div>
</div>
<div class="m">
<div onMouseOver="animate('3')" onMouseOut="animate2('3')" id="3" class="menu">
ляля
</div>
</div>
<script type="text/javascript">
[JS]function animate(id, delta, dur) {
	element = document.getElementById(id);
	from = 10;
	to = 50;
	duration = dur || 500;
	start = new Date().getTime();
function delta(progress) {
function d(progress) {
    return Math.pow(progress, 4);
}
return 1 - d(1 - progress);
}
	setTimeout(function() {
	    var now = (new Date().getTime()) - start;
	    var progress = now / duration;
	    if (progress > 1)
	        var result = to;
                   else 
	        var result = (to - from) * delta(progress) + from;

	    element.style.marginLeft = result+"px";
	    //element.innerHTML = result;

	    if (progress < 1)
	        setTimeout(arguments.callee, 10);
	}, 10);
}
function animate2(id, delta, dur) {
	element = document.getElementById(id);
fr=parseInt(element.style.marginLeft);
	from = fr;
	to = 10;
	duration = dur || 500;
	start = new Date().getTime();
function delta(progress) {
function d(progress) {
    return Math.pow(progress, 4);
}
return 1 - d(1 - progress);
}
	setTimeout(function() {
	    var now = (new Date().getTime()) - start;
	    var progress = now / duration;
	    if (progress > 1)
	        var result = to;
                   else 
	        var result = (to - from) * delta(progress) + from;

	    element.style.marginLeft = result+"px";
	    //element.innerHTML = result;

	    if (progress < 1)
	        setTimeout(arguments.callee, 10);
	}, 10);
}[/JS]
</script>
</body>
</html>

эт меню, при наведении на пункт, он выежает вправо, когда убираешь мышь, обратно, но если навести на другой пункт до того, как этот остановится, он останавливается там, где был, тоесть функция останавливается не завершонная, из-за запуска новой, как это исправить?
Ответить с цитированием