Sundro
21.07.2011, 22:02
Разбирал функцию-пример,animateCSS, из книжки
<html>
<head>
<title>Заголовок</title>
</head>
<body>
<script>
function animateCSS(element, numFrames, timePerFrame, animation, whendone) {
var frame = 0;
var time = 0;
var intervalId = setInterval(displayNextFrame, timePerFrame);
function displayNextFrame() {
if (frame >= numFrames) {
clearInterval(intervalId);
if (whendone) whendone(element);
return;
};
for(var cssprop in animation) {
try {
var a = animation[cssprop](frame, time);
//alert(a);
element.style[cssprop] = a;
} catch(e) {};
};
frame++;
time += timePerFrame;
};
};
var b = document.getElementById("NiceGot");
//alert("b = " + b);
animateCSS( b,30 , 50, {
top: function(f,t) {return 3*f*5 + "px";},
clip : function(f,t) {return "rect(auto "+f*10+"px auto auto)";},
});
</script>
<div style="position:absolute;" id = "NiceGot" >Здесь был Вася</div>
</body>
</html>
сталкнулся с тем что она у меня не работала :cray: , а неработала потому что скрипт не мог получить div из документа. Я долго думал почему так , позже вспомнилось, что у меня такое уже было, дело в том что если теги <script> c функцией располагаются в документе до элемента(как в моем примере) , то его не получить =(, a если позже то все работает. Вопрос вот в чем, как строится DOM
документа, судя по примеру что явно не сразу? P.S Извените за сумбурность.
<html>
<head>
<title>Заголовок</title>
</head>
<body>
<script>
function animateCSS(element, numFrames, timePerFrame, animation, whendone) {
var frame = 0;
var time = 0;
var intervalId = setInterval(displayNextFrame, timePerFrame);
function displayNextFrame() {
if (frame >= numFrames) {
clearInterval(intervalId);
if (whendone) whendone(element);
return;
};
for(var cssprop in animation) {
try {
var a = animation[cssprop](frame, time);
//alert(a);
element.style[cssprop] = a;
} catch(e) {};
};
frame++;
time += timePerFrame;
};
};
var b = document.getElementById("NiceGot");
//alert("b = " + b);
animateCSS( b,30 , 50, {
top: function(f,t) {return 3*f*5 + "px";},
clip : function(f,t) {return "rect(auto "+f*10+"px auto auto)";},
});
</script>
<div style="position:absolute;" id = "NiceGot" >Здесь был Вася</div>
</body>
</html>
сталкнулся с тем что она у меня не работала :cray: , а неработала потому что скрипт не мог получить div из документа. Я долго думал почему так , позже вспомнилось, что у меня такое уже было, дело в том что если теги <script> c функцией располагаются в документе до элемента(как в моем примере) , то его не получить =(, a если позже то все работает. Вопрос вот в чем, как строится DOM
документа, судя по примеру что явно не сразу? P.S Извените за сумбурность.