Why animation doesn't work in my JavaScript code?
0
Decided to raise the level of knowledge of JS according to the book Secrets of the JavaScript Ninja (second edition)
There's an example for working with circuits and kavakami the example animation. I rewrote but it does not work with the browser does not see errors.
function animateIt(elementId) {
var elem = document.getElementById(elementId)
var tick = 0
var timer = setInterval(function() {
if (tick < 100) {
elem.style.left = elem.style.top = tick + 'px'
tick++
} else {
clearInterval(timer)
}
}, 10)
}
animateIt('box1')<div id="box1">First Box</div>What could be the problem?
javascript
edited Jan 19 at 23:22
blex
12.3k12245
asked Jan 19 at 23:20
AmelyAmely
274
add a comment |
0
Decided to raise the level of knowledge of JS according to the book Secrets of the JavaScript Ninja (second edition)
There's an example for working with circuits and kavakami the example animation. I rewrote but it does not work with the browser does not see errors.
function animateIt(elementId) {
var elem = document.getElementById(elementId)
var tick = 0
var timer = setInterval(function() {
if (tick < 100) {
elem.style.left = elem.style.top = tick + 'px'
tick++
} else {
clearInterval(timer)
}
}, 10)
}
animateIt('box1')<div id="box1">First Box</div>What could be the problem?
javascript
edited Jan 19 at 23:22
blex
12.3k12245
asked Jan 19 at 23:20
AmelyAmely
274
add a comment |
0
0
0
Decided to raise the level of knowledge of JS according to the book Secrets of the JavaScript Ninja (second edition)
There's an example for working with circuits and kavakami the example animation. I rewrote but it does not work with the browser does not see errors.
function animateIt(elementId) {
var elem = document.getElementById(elementId)
var tick = 0
var timer = setInterval(function() {
if (tick < 100) {
elem.style.left = elem.style.top = tick + 'px'
tick++
} else {
clearInterval(timer)
}
}, 10)
}
animateIt('box1')<div id="box1">First Box</div>What could be the problem?
javascript
edited Jan 19 at 23:22
blex
12.3k12245
asked Jan 19 at 23:20
AmelyAmely
274
Decided to raise the level of knowledge of JS according to the book Secrets of the JavaScript Ninja (second edition)
There's an example for working with circuits and kavakami the example animation. I rewrote but it does not work with the browser does not see errors.
function animateIt(elementId) {
var elem = document.getElementById(elementId)
var tick = 0
var timer = setInterval(function() {
if (tick < 100) {
elem.style.left = elem.style.top = tick + 'px'
tick++
} else {
clearInterval(timer)
}
}, 10)
}
animateIt('box1')<div id="box1">First Box</div>What could be the problem?
function animateIt(elementId) {
var elem = document.getElementById(elementId)
var tick = 0
var timer = setInterval(function() {
if (tick < 100) {
elem.style.left = elem.style.top = tick + 'px'
tick++
} else {
clearInterval(timer)
}
}, 10)
}
animateIt('box1')<div id="box1">First Box</div>function animateIt(elementId) {
var elem = document.getElementById(elementId)
var tick = 0
var timer = setInterval(function() {
if (tick < 100) {
elem.style.left = elem.style.top = tick + 'px'
tick++
} else {
clearInterval(timer)
}
}, 10)
}
animateIt('box1')<div id="box1">First Box</div>javascript
javascript
edited Jan 19 at 23:22
blex
12.3k12245
asked Jan 19 at 23:20
AmelyAmely
274
edited Jan 19 at 23:22
blex
12.3k12245
asked Jan 19 at 23:20
AmelyAmely
274
edited Jan 19 at 23:22
blex
12.3k12245
edited Jan 19 at 23:22
blex
12.3k12245
edited Jan 19 at 23:22
blex
12.3k12245
12.3k12245
asked Jan 19 at 23:20
AmelyAmely
274
asked Jan 19 at 23:20
AmelyAmely
274
asked Jan 19 at 23:20
AmelyAmely
274
274
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
1
Try this:
function animateIt(elementId) {
var elem = document.getElementById(elementId)
var tick = 0
var timer = setInterval(function() {
if (tick < 100) {
elem.style.position = "absolute";
elem.style.left = elem.style.top = tick + 'px'
tick++
} else {
clearInterval(timer)
}
}, 10)
}
animateIt('box1')
answered Jan 19 at 23:26
OthmaneOthmane
1164
Thx for javascript solution
– Amely
Jan 20 at 19:13
add a comment |
0
Try the following
<div id="box1" style="position: absolute;">First Box</div>
By default a div has position: static which causes the left or top style property to not affect the element.
answered Jan 19 at 23:24
JelleJelle
490110
Thank you for the answer
– Amely
Jan 20 at 19:13
add a comment |
0
/* Unchanged JS */ function animateIt(t){var e=document.getElementById(t),n=0,a=setInterval(function(){n<100?(e.style.left=e.style.top=n+"px",n++):clearInterval(a)},10)}animateIt("box1");/*
* For the `top` and `left` property to work, your element needs
* to have a `position: relative` or `absolute` or `fixed`
*/
#box1 { position: relative; }<!-- Unchanged HTML --> <div id="box1">First Box</div>More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/top
answered Jan 19 at 23:24
blexblex
12.3k12245
Thank you for help.
– Amely
Jan 20 at 19:13
add a comment |
0
Your example is working fine, but for the div to move you need to set its style position.
in this case i set it to realtive and have not changed anything in your code
function animateIt(elementId) {
var elem = document.getElementById(elementId)
var tick = 0
var timer = setInterval(function() {
if (tick < 100) {
elem.style.left = elem.style.top = tick + 'px'
tick++
} else {
clearInterval(timer)
}
}, 10)
}
animateIt('box1')div{
position:relative;
}<div id="box1">First Box</div>answered Jan 19 at 23:39
Alen.TomaAlen.Toma
940511
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54272214%2fwhy-animation-doesnt-work-in-my-javascript-code%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Try this:
function animateIt(elementId) {
var elem = document.getElementById(elementId)
var tick = 0
var timer = setInterval(function() {
if (tick < 100) {
elem.style.position = "absolute";
elem.style.left = elem.style.top = tick + 'px'
tick++
} else {
clearInterval(timer)
}
}, 10)
}
animateIt('box1')
answered Jan 19 at 23:26
OthmaneOthmane
1164
Thx for javascript solution
– Amely
Jan 20 at 19:13
add a comment |
1
Try this:
function animateIt(elementId) {
var elem = document.getElementById(elementId)
var tick = 0
var timer = setInterval(function() {
if (tick < 100) {
elem.style.position = "absolute";
elem.style.left = elem.style.top = tick + 'px'
tick++
} else {
clearInterval(timer)
}
}, 10)
}
animateIt('box1')
answered Jan 19 at 23:26
OthmaneOthmane
1164
Thx for javascript solution
– Amely
Jan 20 at 19:13
add a comment |
1
1
1
Try this:
function animateIt(elementId) {
var elem = document.getElementById(elementId)
var tick = 0
var timer = setInterval(function() {
if (tick < 100) {
elem.style.position = "absolute";
elem.style.left = elem.style.top = tick + 'px'
tick++
} else {
clearInterval(timer)
}
}, 10)
}
animateIt('box1')
answered Jan 19 at 23:26
OthmaneOthmane
1164
Try this:
function animateIt(elementId) {
var elem = document.getElementById(elementId)
var tick = 0
var timer = setInterval(function() {
if (tick < 100) {
elem.style.position = "absolute";
elem.style.left = elem.style.top = tick + 'px'
tick++
} else {
clearInterval(timer)
}
}, 10)
}
animateIt('box1')
answered Jan 19 at 23:26
OthmaneOthmane
1164
answered Jan 19 at 23:26
OthmaneOthmane
1164
answered Jan 19 at 23:26
OthmaneOthmane
1164
answered Jan 19 at 23:26
OthmaneOthmane
1164
1164
Thx for javascript solution
– Amely
Jan 20 at 19:13
add a comment |
Thx for javascript solution
– Amely
Jan 20 at 19:13
Thx for javascript solution
– Amely
Jan 20 at 19:13
Thx for javascript solution
– Amely
Jan 20 at 19:13
add a comment |
0
Try the following
<div id="box1" style="position: absolute;">First Box</div>
By default a div has position: static which causes the left or top style property to not affect the element.
answered Jan 19 at 23:24
JelleJelle
490110
Thank you for the answer
– Amely
Jan 20 at 19:13
add a comment |
0
Try the following
<div id="box1" style="position: absolute;">First Box</div>
By default a div has position: static which causes the left or top style property to not affect the element.
answered Jan 19 at 23:24
JelleJelle
490110
Thank you for the answer
– Amely
Jan 20 at 19:13
add a comment |
0
0
0
Try the following
<div id="box1" style="position: absolute;">First Box</div>
By default a div has position: static which causes the left or top style property to not affect the element.
answered Jan 19 at 23:24
JelleJelle
490110
Try the following
<div id="box1" style="position: absolute;">First Box</div>
By default a div has position: static which causes the left or top style property to not affect the element.
answered Jan 19 at 23:24
JelleJelle
490110
answered Jan 19 at 23:24
JelleJelle
490110
answered Jan 19 at 23:24
JelleJelle
490110
answered Jan 19 at 23:24
JelleJelle
490110
490110
Thank you for the answer
– Amely
Jan 20 at 19:13
add a comment |
Thank you for the answer
– Amely
Jan 20 at 19:13
Thank you for the answer
– Amely
Jan 20 at 19:13
Thank you for the answer
– Amely
Jan 20 at 19:13
add a comment |
0
/* Unchanged JS */ function animateIt(t){var e=document.getElementById(t),n=0,a=setInterval(function(){n<100?(e.style.left=e.style.top=n+"px",n++):clearInterval(a)},10)}animateIt("box1");/*
* For the `top` and `left` property to work, your element needs
* to have a `position: relative` or `absolute` or `fixed`
*/
#box1 { position: relative; }<!-- Unchanged HTML --> <div id="box1">First Box</div>More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/top
answered Jan 19 at 23:24
blexblex
12.3k12245
Thank you for help.
– Amely
Jan 20 at 19:13
add a comment |
0
/* Unchanged JS */ function animateIt(t){var e=document.getElementById(t),n=0,a=setInterval(function(){n<100?(e.style.left=e.style.top=n+"px",n++):clearInterval(a)},10)}animateIt("box1");/*
* For the `top` and `left` property to work, your element needs
* to have a `position: relative` or `absolute` or `fixed`
*/
#box1 { position: relative; }<!-- Unchanged HTML --> <div id="box1">First Box</div>More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/top
answered Jan 19 at 23:24
blexblex
12.3k12245
Thank you for help.
– Amely
Jan 20 at 19:13
add a comment |
0
0
0
/* Unchanged JS */ function animateIt(t){var e=document.getElementById(t),n=0,a=setInterval(function(){n<100?(e.style.left=e.style.top=n+"px",n++):clearInterval(a)},10)}animateIt("box1");/*
* For the `top` and `left` property to work, your element needs
* to have a `position: relative` or `absolute` or `fixed`
*/
#box1 { position: relative; }<!-- Unchanged HTML --> <div id="box1">First Box</div>More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/top
answered Jan 19 at 23:24
blexblex
12.3k12245
/* Unchanged JS */ function animateIt(t){var e=document.getElementById(t),n=0,a=setInterval(function(){n<100?(e.style.left=e.style.top=n+"px",n++):clearInterval(a)},10)}animateIt("box1");/*
* For the `top` and `left` property to work, your element needs
* to have a `position: relative` or `absolute` or `fixed`
*/
#box1 { position: relative; }<!-- Unchanged HTML --> <div id="box1">First Box</div>More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/top
/* Unchanged JS */ function animateIt(t){var e=document.getElementById(t),n=0,a=setInterval(function(){n<100?(e.style.left=e.style.top=n+"px",n++):clearInterval(a)},10)}animateIt("box1");/*
* For the `top` and `left` property to work, your element needs
* to have a `position: relative` or `absolute` or `fixed`
*/
#box1 { position: relative; }<!-- Unchanged HTML --> <div id="box1">First Box</div> /* Unchanged JS */ function animateIt(t){var e=document.getElementById(t),n=0,a=setInterval(function(){n<100?(e.style.left=e.style.top=n+"px",n++):clearInterval(a)},10)}animateIt("box1");/*
* For the `top` and `left` property to work, your element needs
* to have a `position: relative` or `absolute` or `fixed`
*/
#box1 { position: relative; }<!-- Unchanged HTML --> <div id="box1">First Box</div>answered Jan 19 at 23:24
blexblex
12.3k12245
answered Jan 19 at 23:24
blexblex
12.3k12245
answered Jan 19 at 23:24
blexblex
12.3k12245
answered Jan 19 at 23:24
blexblex
12.3k12245
12.3k12245
Thank you for help.
– Amely
Jan 20 at 19:13
add a comment |
Thank you for help.
– Amely
Jan 20 at 19:13
Thank you for help.
– Amely
Jan 20 at 19:13
Thank you for help.
– Amely
Jan 20 at 19:13
add a comment |
0
Your example is working fine, but for the div to move you need to set its style position.
in this case i set it to realtive and have not changed anything in your code
function animateIt(elementId) {
var elem = document.getElementById(elementId)
var tick = 0
var timer = setInterval(function() {
if (tick < 100) {
elem.style.left = elem.style.top = tick + 'px'
tick++
} else {
clearInterval(timer)
}
}, 10)
}
animateIt('box1')div{
position:relative;
}<div id="box1">First Box</div>answered Jan 19 at 23:39
Alen.TomaAlen.Toma
940511
add a comment |
0
Your example is working fine, but for the div to move you need to set its style position.
in this case i set it to realtive and have not changed anything in your code
function animateIt(elementId) {
var elem = document.getElementById(elementId)
var tick = 0
var timer = setInterval(function() {
if (tick < 100) {
elem.style.left = elem.style.top = tick + 'px'
tick++
} else {
clearInterval(timer)
}
}, 10)
}
animateIt('box1')div{
position:relative;
}<div id="box1">First Box</div>answered Jan 19 at 23:39
Alen.TomaAlen.Toma
940511
add a comment |
0
0
0
Your example is working fine, but for the div to move you need to set its style position.
in this case i set it to realtive and have not changed anything in your code
function animateIt(elementId) {
var elem = document.getElementById(elementId)
var tick = 0
var timer = setInterval(function() {
if (tick < 100) {
elem.style.left = elem.style.top = tick + 'px'
tick++
} else {
clearInterval(timer)
}
}, 10)
}
animateIt('box1')div{
position:relative;
}<div id="box1">First Box</div>answered Jan 19 at 23:39
Alen.TomaAlen.Toma
940511
Your example is working fine, but for the div to move you need to set its style position.
in this case i set it to realtive and have not changed anything in your code
function animateIt(elementId) {
var elem = document.getElementById(elementId)
var tick = 0
var timer = setInterval(function() {
if (tick < 100) {
elem.style.left = elem.style.top = tick + 'px'
tick++
} else {
clearInterval(timer)
}
}, 10)
}
animateIt('box1')div{
position:relative;
}<div id="box1">First Box</div>function animateIt(elementId) {
var elem = document.getElementById(elementId)
var tick = 0
var timer = setInterval(function() {
if (tick < 100) {
elem.style.left = elem.style.top = tick + 'px'
tick++
} else {
clearInterval(timer)
}
}, 10)
}
animateIt('box1')div{
position:relative;
}<div id="box1">First Box</div>function animateIt(elementId) {
var elem = document.getElementById(elementId)
var tick = 0
var timer = setInterval(function() {
if (tick < 100) {
elem.style.left = elem.style.top = tick + 'px'
tick++
} else {
clearInterval(timer)
}
}, 10)
}
animateIt('box1')div{
position:relative;
}<div id="box1">First Box</div>answered Jan 19 at 23:39
Alen.TomaAlen.Toma
940511
answered Jan 19 at 23:39
Alen.TomaAlen.Toma
940511
answered Jan 19 at 23:39
Alen.TomaAlen.Toma
940511
answered Jan 19 at 23:39
Alen.TomaAlen.Toma
940511
940511
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54272214%2fwhy-animation-doesnt-work-in-my-javascript-code%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
