Что-то я не понимаю. Я сейчас выложу два скрипта, не обращайте на длину скрипта. Я укажу на что обратить внимание.
Вот что было до того, как создал этот топик:
<!DOCTYPE HTML>
<html>
<head>
<title>test.com</title>
<style type="text/css">
div#example {
display: inline-block;
width: 500px;
height: 30px;
background-color: white;
border: 2px black solid;
position: absolute;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function delta(progress) {
return progress;
};
function fCreateLine(mainElement, positionHorizontale, positionVerticale){
var eLineInside = document.createElement('div');
eLineInside.style.position = "absolute";
mainElement.appendChild(eLineInside);
eLineInside.style.top = positionVerticale + "px";
eLineInside.style.left = positionHorizontale + "px";
//alert(eLineInside.style.top);
eLineInside.style.height = "2px";
eLineInside.style.width = "2px";
return eLineInside;
}
function fSetTimeoutCreate(eLineF1, fromF1, toF1, durationF1, startF1){
setTimeout(function() {
var now = (new Date().getTime()) - startF1; // Текущее время
var progress = now / durationF1; // Прогресс анимации
var result = (toF1 - fromF1) * delta(progress) + fromF1;
eLineF1.style.width = result + "px";
if(result>250){
eLineF1.style.backgroundColor = 'red';
}else{
eLineF1.style.backgroundColor = 'green';
};
if (progress < 1){
setTimeout(arguments.callee, 5);
}else{
startF1 = new Date().getTime();
/*
setTimeout(
function (){
fSetTimeoutRemove(eLineF1, 500, 0 , 1000, startF1);
},
1000
);
*/
setTimeout(fSetTimeoutRemove(eLineF1, 500, 0, 1000, startF1), 10000);
};
}, 5);
};
function fSetTimeoutRemove(eLineF2, fromF2, toF2, durationF2, startF2){
//alert('f2 started');
setTimeout(function() {
var now = (new Date().getTime()) - startF2; // Текущее время
var progress = now / durationF2; // Прогресс анимации
//alert(progress);
var result = (toF2 - fromF2) * delta(progress) + fromF2;
eLineF2.style.width = result + "px";
// alert(result);
if(result>250){
eLineF2.style.backgroundColor = 'red';
}else{
eLineF2.style.backgroundColor = 'green';
};
if (progress < 1){
setTimeout(arguments.callee, 15);
}else{
//eLineF2.remove();
};
}, 15);
};
$(document).ready(function(){
$('#example').click(function(){
var element = document.getElementById("example");
eLine = fCreateLine(element, 0, 15);
var from = 0; // Начальная координата X
var to = 500; // Конечная координата X
var duration = 1000; // Длительность - 1 секунда
var start = new Date().getTime(); // Время старта
fSetTimeoutCreate(eLine, 0, 500, 1000, start);
});
});
</script>
</head>
<body>
<div id="example"></div>
</body>
</html>
Проблема с задержкой. Я заменяю строку 89, как советовали, и вообще ступор:
<!DOCTYPE HTML>
<html>
<head>
<title>test.com</title>
<style type="text/css">
div#example {
display: inline-block;
width: 500px;
height: 30px;
background-color: white;
border: 2px black solid;
position: absolute;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function delta(progress) {
return progress;
};
function fCreateLine(mainElement, positionHorizontale, positionVerticale){
var eLineInside = document.createElement('div');
eLineInside.style.position = "absolute";
mainElement.appendChild(eLineInside);
eLineInside.style.top = positionVerticale + "px";
eLineInside.style.left = positionHorizontale + "px";
//alert(eLineInside.style.top);
eLineInside.style.height = "2px";
eLineInside.style.width = "2px";
return eLineInside;
}
function fSetTimeoutCreate(eLineF1, fromF1, toF1, durationF1, startF1){
setTimeout(function() {
var now = (new Date().getTime()) - startF1; // Текущее время
var progress = now / durationF1; // Прогресс анимации
var result = (toF1 - fromF1) * delta(progress) + fromF1;
eLineF1.style.width = result + "px";
if(result>250){
eLineF1.style.backgroundColor = 'red';
}else{
eLineF1.style.backgroundColor = 'green';
};
if (progress < 1){
setTimeout(arguments.callee, 5);
}else{
startF1 = new Date().getTime();
setTimeout(
function (){
fSetTimeoutRemove(eLineF1, 500, 0 , 1000, startF1);
},
1000
);
// setTimeout(fSetTimeoutRemove(eLineF1, 500, 0, 1000, startF1), 10000);
};
}, 5);
};
function fSetTimeoutRemove(eLineF2, fromF2, toF2, durationF2, startF2){
alert('f2 started');
setTimeout(function() {
var now = (new Date().getTime()) - startF2; // Текущее время
var progress = now / durationF2; // Прогресс анимации
//alert(progress);
var result = (toF2 - fromF2) * delta(progress) + fromF2;
eLineF2.style.width = result + "px";
// alert(result);
if(result>250){
eLineF2.style.backgroundColor = 'red';
}else{
eLineF2.style.backgroundColor = 'green';
};
if (progress < 1){
setTimeout(arguments.callee, 15);
}else{
//eLineF2.remove();
};
}, 15);
};
$(document).ready(function(){
$('#example').click(function(){
var element = document.getElementById("example");
eLine = fCreateLine(element, 0, 15);
var from = 0; // Начальная координата X
var to = 500; // Конечная координата X
var duration = 1000; // Длительность - 1 секунда
var start = new Date().getTime(); // Время старта
fSetTimeoutCreate(eLine, 0, 500, 1000, start);
});
});
</script>
</head>
<body>
<div id="example"></div>
</body>
</html>
Вторая функция теперь вызывается вовремя, но формула таймера выдаёт уже совсем не те цифры:
var result = (toF2 - fromF2) * delta(progress) + fromF2;