Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   как тормознуть функцию до завершения предыдушей? (https://javascript.ru/forum/dom-window/19210-kak-tormoznut-funkciyu-do-zaversheniya-predydushejj.html)

qwertyuiop 28.07.2011 21:56

как тормознуть функцию до завершения предыдушей?
 
<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>

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

Андрей38 28.07.2011 22:24

Цитата:

эт меню, при наведении на пункт, он выежает вправо, когда убираешь мышь, обратно, но если навести на другой пункт до того, как этот остановится, он останавливается там, где был, тоесть функция останавливается не завершонная, из-за запуска новой, как это исправить?
Я тоже на это наткнулься когда делал такое в Квери .Там у нас в Квери есть stop().Вот этот стоп и выручает. Я не знаю,правда, как это выглядит на чистом js

NoResponse 29.07.2011 00:30

код ужасен
не стоит просто так срать в глобал... собственно поэтому и работает "не правильно", у вас просто тупо переназначаются глобальные переменные


Часовой пояс GMT +3, время: 09:37.