Я новичок в JavaScript ... пожалуйста, потерпите меня.Изменен код анимации jQuery из учебника w3c.Я просто пытаюсь динамически отобразить локальную переменную count (i) в цикле for, которая представляет количество итераций, которые имели место для набора (4) вызовов анимации jQuery.Я ожидал, что текст в теге SPAN будет динамически изменяться с 0 на 2 после каждой итерации цикла.Однако при нажатии кнопки происходит то, что «count: 2» сразу отображается в теге span, после чего происходит анимация.Этот код выполняется (http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation) то же самое в следующих браузерах: Chrome, IE, FireFox и Safari. Что я делаю не так и как я могу заставить это работать?
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
for(i=0; i<3; i++)
{
$("div").animate({height:300},"slow"); //jQuery call 1
$("div").animate({width:300},"slow"); //jQuery call 2
$("div").animate({height:100},"slow"); //jQuery call 3
$("div").animate({width:100},"slow"); //jQuery call 4
document.getElementById("count").innerHTML="count: "+i; // JavaScript DOM call
}
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<br /><br />
<div style="background:#98bf21;height:100px;width:100px;position:relative">
<span id="count"></span>
</div>
</body>
</html>
__ Оригинальный пост выше ... новый рабочий код под этой строкой __ _ __
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var i=0;
$("div").animate({height:300},"slow",function(){ document.getElementById ("count").innerHTML="jQuery Animation 1"; });
$(document).ready(function(){ $("button").click(function(){ myRecursiveFunction(i); }); });
function myRecursiveFunction(i)
{
document.getElementById("count").innerHTML="count: "+i;
$("div").animate({height:300},"slow");
$("div").animate({width:300},"slow");
$("div").animate({height:100},"slow");
$("div").animate({width:100},"slow",function(){
if(i < 10){myRecursiveFunction(++i);}
});
}
</script>
</head>
<body>
<button>Start Animation</button>
<br /><br />
<div style="background:#98bf21;height:100px;width:100px;position:relative">
<span id="count"></span>
</div>
</body>
</html>