This question already has answers here:
JS function named `animate` doesn't work in Chrome, but works in IE
(3 answers)
Closed 6 years ago.
I am trying to make an animation in JavaScript, but there is an error i cannot find because my code won't work. I am trying to get the blue box to move diagonally from left to right but it just stays still. Please help.
function animate() {
var elem = document.getElementById('ani');
var pos = 0;
var id = setInterval(frame, 3);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
}
#box {
background: red;
width: 400px;
height: 400px;
position: relative;
}
#ani {
background: blue;
width: 50px;
height: 50px;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css' />
<script src='script.js'></script>
<title>Practice</title>
</head>
<body>
<p>
<button onclick="animate()">OK</button>
</p>
<div id="box">
<div id="ani"></div>
</div>
</body>
</html>
Use different function name than animate. [Ref]
The Element.animate() method is a shortcut method for creating and playing an animation on an element. And when global function animate() is declared, it is shadowed by Element.prototype.animate
Try this:
function animateMe() {
var elem = document.getElementById('ani');
var pos = 0;
var id = setInterval(frame, 3);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
}
#box {
background: red;
width: 400px;
height: 400px;
position: relative;
}
#ani {
background: blue;
width: 50px;
height: 50px;
position: absolute;
}
<p>
<button onclick="animateMe()">OK</button>
</p>
<div id="box">
<div id="ani"></div>
</div>
Note: As explained in the provided reference, you can use window.animate() as it will not refer to shadowed prototype but Global animate function
Fiddle here
Related
I was tasked with creating an animation in javascript using an existing code and altering to do two things. Switch modes, and go on until the person closes the program. The four modes are:
mode 0 - left to right
mode 1 - top to bottom
mode 2 - right to left
mode 3 - bottom to top
Switching from mode 0 - 1 is where the trouble starts. It's supposed to slide, but it jumps when I get there.
Below is my code as is.
<!DOCTYPE html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body>
<p><button onclick="myMove()">Click Me</button></p>
<div id ="container">
<div id ="animate"></div>
</div>
<script>
function myMove() {
var elem = document.getElementById("animate");
var pos = 350;
var id = setInterval(frame, 5);
}
function frame() {
if (pos == 0) {
pos++;
elem.style.bottom= pos + 'px';
} else {
pos--;
elem.style.left = pos + "px";
if (pos == 49.985) {
pos++;
elem.style.left = pos + "px";
}
}
I suggest you use two variables for both x and y, and replace posBottom with a variable for top style.
The issue before was that when pos was equal to 0 and thus triggered the if statement, it immediately incremented, causing it to instead trigger the else, and then decremented, going back to if, and so on. It jumped because the style.bottom = 0px was causing it to go straight down to the bottom.
function myMove() {
var elem = document.getElementById("animate");
var posLeft = 350;
var posTop = 0;
var id = setInterval(frame, 5);
function frame() {
if (posLeft == 0 && posTop != 350) {
stage=1;
posTop++;
elem.style.top= posTop + 'px';
} else if (posTop == 0) {
posLeft--;
elem.style.left = posLeft + "px";
} else if (posLeft != 350) {
posLeft++;
elem.style.left = posLeft + "px";
} else if (posTop != 0) {
posTop--;
elem.style.top= posTop + 'px';
}
}
}
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
<p><button onclick="myMove()">Click Me</button></p>
<div id ="container">
<div id ="animate"></div>
</div>
I'm trying to make my div element move back and forth inside a container infinitely.
The goal is to use Java Script only, no CSS animations, jQuery, etc.
const container = document.getElementById('container');
const box = document.getElementById('box');
let t = setInterval(move, 1);
let pos = 1;
function move() {
box.style.left = pos + 'px';
box.style.top = pos + 'px';
pos++;
if (pos === 150) {
clearInterval(t)
}
}
#container{
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
#box{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
animation-direction: alternate;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<link href="animation.css" rel="stylesheet">
<script defer src="animation.js"></script>
</head>
<body>
<div id="container">
<div id="box"></div>
</div>
</body>
</html>
So here the code. As you see, I've used position relative/absolute to make the element move with setInterval function. But when I try to reverse it back to "it's corner", it just won't work. To be honest, I've tried some stuff already, but I really can't find the solution of doing it without using any other instruments.
Thanks in advance.
You need to increase/decrease the values considering a boolean variable like below:
const container = document.getElementById('container');
const box = document.getElementById('box');
let t = setInterval(move, 1);
let pos = 1;
let test = true;
function move() {
box.style.left = pos + 'px';
box.style.top = pos + 'px';
if (test)
pos++; /* move down */
else
pos--; /* move up */
/* update the direction when you reach the top or bottom limit*/
if (pos >= 150)
test = false
else if (pos <= 0)
test = true;
}
#container {
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
#box {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
<div id="container">
<div id="box"></div>
</div>
An alternative to get the same results
const box = document.getElementById('box');
let jump = 1;
let pos = 0;
window.setInterval(() => {
pos = pos + jump;
if (pos > 150 || pos < 0) {
jump = jump * (-1);
}
box.style.left = pos + 'px';
box.style.top = pos + 'px';
}, 1);
#container{
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
#box{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
animation-direction: alternate;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<link href="animation.css" rel="stylesheet">
<script defer src="animation.js"></script>
</head>
<body>
<div id="container">
<div id="box"></div>
</div>
</body>
</html>
So i have this web-page to design and i want an image of the moon to rise-up from bottom of the screen to top. This is the HTML :
<body>
<div id="Moon" onload="Moon()"></div>
</body>
CSS :
#Moon{
width: 150px;
height: 150px;
left: 50px;
top: 600px;
background: transparent url(../Img/Moon.SVG) no-repeat ;
position: absolute;
}
and JavaScript for animation :
function Moon(){
var Moon=document.getElementById("Moon");
var yposition=Moon.style.top;
var id = setInterval(frame, 10);
function frame(){
if (Moon.style.top > 100) {
yposition--;
Moon.style.top = yposition + 'px';
} else {
clearInterval(id);
}
frame();
}
}
but for some reasons the image of moon stays at the bottom of the page and doesn't move at all. any ideas?
Try like this.
you need to calculate top offset of the div using moon.offsetTop
and a div does not have a onload event so you will have to call your Moon() function either from script or from body onload event
function Moon(){
var moon=document.getElementById("Moon");
var yposition= parseInt(moon.offsetTop) ;
var id = setInterval(frame, 10);
function frame()
{
if (moon.offsetTop > 10) {
yposition--;
document.getElementById("Moon").style.top = yposition + 'px';
} else {
clearInterval(id);
}
}
}
#Moon{
width: 300px;
height: 250px;
left: 50px;
top: 600px;
background: transparent url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQh7mGmBMJ--wS711QkCEPHHS56jV15VmESttDbVLZPSI_FsMAyTQ") no-repeat ;
position: absolute;
}
<body onload="Moon()">
<div id="Moon"></div>
</body>
I spent the last two days getting a ribbon animation to work with divs so that I can later add li link elements to them to act as a menu. I used the progess bar animation code as inspiration from w3schools. The animation works great, only issue is that the code is very un-DRY. I tried to simplify the code by not repeating myself in the CSS and especially not in the javascript but I kept getting closure issues even after using self invoked functions. I would be greatful if anyone can give me some advice or even a solution that will greatly shorten my code to have the same animation effect. I know that I will have several ribbons on the page, each with different number of ribbon layers, so the code as it is can get very complicated very fast. N.B the code below is the working version.
function move1() {
var width = 0;
var elem = document.getElementById("ribbon-part-1");
var id = setInterval(frame, 1);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
function move2() {
var width = 0;
var elem = document.getElementById("ribbon-part-2");
var id = setInterval(frame, 1)
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width += 2;
elem.style.width = width + '%';
}
}
}
function move3() {
var width = 0;
var elem = document.getElementById("ribbon-part-3");
var id = setInterval(frame, 1)
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width += 2;
elem.style.width = width + '%';
}
}
}
function move4() {
var width = 0;
var elem = document.getElementById("ribbon-part-4");
var id = setInterval(frame, 1)
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width += 2;
elem.style.width = width + '%';
}
}
}
function move5() {
var width = 0;
var elem = document.getElementById("end-ribbon");
var id = setInterval(frame, 1)
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width += 2;
elem.style.width = width + '%';
}
}
}
function move() {
setTimeout(move1, 300);
setTimeout(move2, 600);
setTimeout(move3, 900);
setTimeout(move4, 1200);
setTimeout(move5, 1500);
}
* {
box-sizing: border-box;
}
.front-ribbon {
position: relative;
/*background-color: grey;*/
height: 23px;
width: 160px;
z-index: 1;
transform: skewY(-11deg);
}
.back-ribbon {
position: relative;
/*background-color: grey;*/
height: 23px;
width: 160px;
transform: skewY(4.7deg);
z-index: -1;
}
#ribbon-part-1 {
background-color: rgb(70, 125, 76);
height: 23px;
width: 0%;
}
#ribbon-part-2 {
background-color: rgb(89, 166, 101);
height: 23px;
width: 0%;
}
/*Including the code below will allow for a reverse progressive bar*/
.front-ribbon #ribbon-part-2 {
display: block;
float: right;
}
#ribbon-part-3 {
background-color: rgb(70, 125, 76);
height: 23px;
width: 0%;
}
#ribbon-part-4 {
background-color: rgb(89, 166, 101);
height: 23px;
width: 0%;
}
/*Including the code below will allow for a reverse progressive bar*/
.front-ribbon #ribbon-part-4 {
display: block;
float: right;
}
#end-ribbon {
fill: rgb(70, 125, 76);
width: 0%;
}
<h1>JavaScript ribbon animation</h1>
<div class="back-ribbon">
<div id="ribbon-part-1"></div>
</div>
<div class="front-ribbon">
<div id="ribbon-part-2"></div>
</div>
<div class="back-ribbon">
<div id="ribbon-part-3"></div>
</div>
<div class="front-ribbon">
<div id="ribbon-part-4"></div>
</div>
<svg id="end-ribbon">
<path d="M-6 17 L35 24 L24 10 Z" />
</svg>
<br>
<br>
<br>
<button onclick="move()">Click Me</button>
Perhaps automate the creation of the different ribbons and their styles with DOM manipulation in the JS body, using ReactJS or similar.
I've made margin of 2 divs move (using variable and variable++ or -- with style attribute in js to change margin) Like that:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset="utf-8" />
<title>Game</title>
<style>
body{
position: absolute;
background: #f00;
}
.point{
position: absolute;
width: 15px;
height: 15px;
background: #fff;
border-radius: 10px;
margin: 0px 0 0;
}
.player{
position: absolute;
text-align: center;
width: 200px;
height: 20px;
background: #0005ff;
margin: 550px 550px 0px;
}
</style>
<script>
var num = 550;
$(document).keydown(function (event) {
switch (event.keyCode) {
// Left Arrow
case 37: num = num-- - 15;
document.getElementById('player').style.margin = '550px ' + num + 'px 0px';
break;
// Right Arrow
case 39: num = 15 + num++;
document.getElementById('player').style.margin = '550px ' + num + 'px 0px';
break;
}
});
var nump = 0;
$(document).load(function () {
nump++;
document.getElementById('point').style.margin = nump + 'px 0px 0px';
});
</script>
</head>
<body>
<div class="point" id="point"></div>
<div class="player" id="player"></div>
</body>
</html>
Now I got problem about moving div named point.The div, point is not moving when I use $(document).load but the other div works. How can I fix that?
My second question is how can i check when div "point" touch div "player" then i'll return div point to the start and make a loop.
try this to move the point
var nump = 0;
var touch = false;
var flagtouch;
$(document).ready(function () {
flagtouch = setInterval(function(){
movePoint(nump);
},1000);
});
function movePoint()
{
document.getElementById('point').style.margin = nump + 'px 0px 0px';
touch = chekTouch(); // check whether the divs touches and return true if touched
if(touch)
{
clearInterval(flagtouch);
}
else
{
nump = nump+5;
}
}
For the second question:
With http://api.jquery.com/position/, you can known the position of both divs, and as you know too the width and height of the elements, you can calculate the region occupied by each element, and then when the elements touch each other.