Animate a box, bouncing left and right

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;

up vote
2
down vote

favorite

I wrote the following code for move a box to right and return it to left, and repeat this action forever.

This code works, but is there a better solution?

function move() check == false)
 

 if(box.style.left.replace("px","") > 0)
 check = false;
 moveleft(box);
 else if (box.style.left.replace("px","") == 0)
 check = true;
 
 

function moveRight(box)
 if(box.style.left != "")
 let temp = box.style.left.replace("px","");
 temp = parseInt(temp);
 box.style.left = temp+1+"px";
 elsebox.style.left = "1px";

function moveleft(box)
 if(box.style.left != "")
 let temp = box.style.left.replace("px","");
 temp = parseInt(temp);
 box.style.left = temp-1+"px";
 elsebox.style.left = "1px";

var check = true;
setInterval(move,10);

#plan
 width: 200px;
 height: 200px; 
		background: #00C0FF;
 position: relative;
	
	#box
	 width: 20px;
		height: 20px;
		background: red;
 position: absolute;

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<div id="plan">
		<div id="box"></div>
	</div>
</body>
</html>

edited Feb 7 at 21:25

asked Feb 7 at 21:00

mohsen hasani

133

add a commentÂ |Â

up vote
2
down vote

favorite

I wrote the following code for move a box to right and return it to left, and repeat this action forever.

This code works, but is there a better solution?

function move() check == false)
 

 if(box.style.left.replace("px","") > 0)
 check = false;
 moveleft(box);
 else if (box.style.left.replace("px","") == 0)
 check = true;
 
 

function moveRight(box)
 if(box.style.left != "")
 let temp = box.style.left.replace("px","");
 temp = parseInt(temp);
 box.style.left = temp+1+"px";
 elsebox.style.left = "1px";

function moveleft(box)
 if(box.style.left != "")
 let temp = box.style.left.replace("px","");
 temp = parseInt(temp);
 box.style.left = temp-1+"px";
 elsebox.style.left = "1px";

var check = true;
setInterval(move,10);

#plan
 width: 200px;
 height: 200px; 
		background: #00C0FF;
 position: relative;
	
	#box
	 width: 20px;
		height: 20px;
		background: red;
 position: absolute;

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<div id="plan">
		<div id="box"></div>
	</div>
</body>
</html>

edited Feb 7 at 21:25

asked Feb 7 at 21:00

mohsen hasani

133

add a commentÂ |Â

up vote
2
down vote

favorite

I wrote the following code for move a box to right and return it to left, and repeat this action forever.

This code works, but is there a better solution?

function move() check == false)
 

 if(box.style.left.replace("px","") > 0)
 check = false;
 moveleft(box);
 else if (box.style.left.replace("px","") == 0)
 check = true;
 
 

function moveRight(box)
 if(box.style.left != "")
 let temp = box.style.left.replace("px","");
 temp = parseInt(temp);
 box.style.left = temp+1+"px";
 elsebox.style.left = "1px";

function moveleft(box)
 if(box.style.left != "")
 let temp = box.style.left.replace("px","");
 temp = parseInt(temp);
 box.style.left = temp-1+"px";
 elsebox.style.left = "1px";

var check = true;
setInterval(move,10);

#plan
 width: 200px;
 height: 200px; 
		background: #00C0FF;
 position: relative;
	
	#box
	 width: 20px;
		height: 20px;
		background: red;
 position: absolute;

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<div id="plan">
		<div id="box"></div>
	</div>
</body>
</html>

edited Feb 7 at 21:25

asked Feb 7 at 21:00

mohsen hasani

133

I wrote the following code for move a box to right and return it to left, and repeat this action forever.

This code works, but is there a better solution?

function move() check == false)
 

 if(box.style.left.replace("px","") > 0)
 check = false;
 moveleft(box);
 else if (box.style.left.replace("px","") == 0)
 check = true;
 
 

function moveRight(box)
 if(box.style.left != "")
 let temp = box.style.left.replace("px","");
 temp = parseInt(temp);
 box.style.left = temp+1+"px";
 elsebox.style.left = "1px";

function moveleft(box)
 if(box.style.left != "")
 let temp = box.style.left.replace("px","");
 temp = parseInt(temp);
 box.style.left = temp-1+"px";
 elsebox.style.left = "1px";

var check = true;
setInterval(move,10);

#plan
 width: 200px;
 height: 200px; 
		background: #00C0FF;
 position: relative;
	
	#box
	 width: 20px;
		height: 20px;
		background: red;
 position: absolute;

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<div id="plan">
		<div id="box"></div>
	</div>
</body>
</html>

function move() check == false)
 

 if(box.style.left.replace("px","") > 0)
 check = false;
 moveleft(box);
 else if (box.style.left.replace("px","") == 0)
 check = true;
 
 

function moveRight(box)
 if(box.style.left != "")
 let temp = box.style.left.replace("px","");
 temp = parseInt(temp);
 box.style.left = temp+1+"px";
 elsebox.style.left = "1px";

function moveleft(box)
 if(box.style.left != "")
 let temp = box.style.left.replace("px","");
 temp = parseInt(temp);
 box.style.left = temp-1+"px";
 elsebox.style.left = "1px";

var check = true;
setInterval(move,10);

#plan
 width: 200px;
 height: 200px; 
		background: #00C0FF;
 position: relative;
	
	#box
	 width: 20px;
		height: 20px;
		background: red;
 position: absolute;

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<div id="plan">
		<div id="box"></div>
	</div>
</body>
</html>

function move() check == false)
 

 if(box.style.left.replace("px","") > 0)
 check = false;
 moveleft(box);
 else if (box.style.left.replace("px","") == 0)
 check = true;
 
 

function moveRight(box)
 if(box.style.left != "")
 let temp = box.style.left.replace("px","");
 temp = parseInt(temp);
 box.style.left = temp+1+"px";
 elsebox.style.left = "1px";

function moveleft(box)
 if(box.style.left != "")
 let temp = box.style.left.replace("px","");
 temp = parseInt(temp);
 box.style.left = temp-1+"px";
 elsebox.style.left = "1px";

var check = true;
setInterval(move,10);

#plan
 width: 200px;
 height: 200px; 
		background: #00C0FF;
 position: relative;
	
	#box
	 width: 20px;
		height: 20px;
		background: red;
 position: absolute;

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<div id="plan">
		<div id="box"></div>
	</div>
</body>
</html>

edited Feb 7 at 21:25

asked Feb 7 at 21:00

mohsen hasani

133

edited Feb 7 at 21:25

asked Feb 7 at 21:00

mohsen hasani

133

asked Feb 7 at 21:00

mohsen hasani

133

asked Feb 7 at 21:00

mohsen hasani

133

add a commentÂ |Â

1 Answer
1

active

oldest

votes

up vote
3
down vote

accepted

Please take care to use consistent indentation for your JavaScript, HTML, and CSS. In particular, avoid mixing spaces and tabs.

Avoid using meaningless variable names such as check and temp. In this case, you didn't even need temp, because:

If parseInt encounters a character that is not a numeral in the specified radix, it ignores it and all succeeding characters and returns the integer value parsed up to that point. parseInt truncates numbers to integer values. Leading and trailing spaces are allowed.

Your sleep() function appears to be unused. In any case, you should avoid having a while loop that simply wastes CPU power; setInterval() and setTimeout() are much more appropriate ways to control timing. For DOM-related updates and animations, though, you should use requestAnimationFrame().

The entire problem would be better solved using CSS animations, which are supported by a large proportion of modern browsers. In fact, the set of browsers that support the let keyword (which you used) is a subset of the browsers that support CSS Animations.

@keyframes slide 
 from left: 0; 
 to left: 180px; /* 200px - 20px */ 


#plan 
 width: 200px;
 height: 200px; 
 background: #00C0FF;
 position: relative;


#box 
 width: 20px;
 height: 20px;
 background: red;
 position: absolute;
 animation: 3.6s linear infinite alternate slide;

<div id="plan"><div id="box"></div></div>

edited Feb 8 at 3:33

answered Feb 7 at 21:39

200_success

123k14143401

1

-1 for bad advice. setTimeout, or setIntervalshould NEVER be used to render DOM animations. They run out of sync with the display, present new content immediately on exit, rather than delayed till Vsync, and continue even when page content is not visible, chewing up power and resources for no reason. Always use requestAnimationFrame for animating the DOM (and for that matter any type of DOM updates)
â€“Â Blindman67
Feb 8 at 3:30

1

@Blindman67 Thanks for the reminder. Incorporated into Rev 2.
â€“Â 200_success
Feb 8 at 3:33

add a commentÂ |Â

Your Answer

StackExchange.ifUsing("editor", function ()
return StackExchange.using("mathjaxEditing", function ()
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix)
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
);
);
, "mathjax-editing");

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: "196"
;
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',
convertImagesToLinks: false,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f187052%2fanimate-a-box-bouncing-left-and-right%23new-answer', 'question_page');

);

Post as a guest

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
3
down vote

accepted

Please take care to use consistent indentation for your JavaScript, HTML, and CSS. In particular, avoid mixing spaces and tabs.

Avoid using meaningless variable names such as check and temp. In this case, you didn't even need temp, because:

If parseInt encounters a character that is not a numeral in the specified radix, it ignores it and all succeeding characters and returns the integer value parsed up to that point. parseInt truncates numbers to integer values. Leading and trailing spaces are allowed.

@keyframes slide 
 from left: 0; 
 to left: 180px; /* 200px - 20px */ 


#plan 
 width: 200px;
 height: 200px; 
 background: #00C0FF;
 position: relative;


#box 
 width: 20px;
 height: 20px;
 background: red;
 position: absolute;
 animation: 3.6s linear infinite alternate slide;

<div id="plan"><div id="box"></div></div>

edited Feb 8 at 3:33

answered Feb 7 at 21:39

200_success

123k14143401

1

-1 for bad advice. setTimeout, or setIntervalshould NEVER be used to render DOM animations. They run out of sync with the display, present new content immediately on exit, rather than delayed till Vsync, and continue even when page content is not visible, chewing up power and resources for no reason. Always use requestAnimationFrame for animating the DOM (and for that matter any type of DOM updates)
â€“Â Blindman67
Feb 8 at 3:30

1

@Blindman67 Thanks for the reminder. Incorporated into Rev 2.
â€“Â 200_success
Feb 8 at 3:33

add a commentÂ |Â

up vote
3
down vote

accepted

Please take care to use consistent indentation for your JavaScript, HTML, and CSS. In particular, avoid mixing spaces and tabs.

Avoid using meaningless variable names such as check and temp. In this case, you didn't even need temp, because:

If parseInt encounters a character that is not a numeral in the specified radix, it ignores it and all succeeding characters and returns the integer value parsed up to that point. parseInt truncates numbers to integer values. Leading and trailing spaces are allowed.

@keyframes slide 
 from left: 0; 
 to left: 180px; /* 200px - 20px */ 


#plan 
 width: 200px;
 height: 200px; 
 background: #00C0FF;
 position: relative;


#box 
 width: 20px;
 height: 20px;
 background: red;
 position: absolute;
 animation: 3.6s linear infinite alternate slide;

<div id="plan"><div id="box"></div></div>

edited Feb 8 at 3:33

answered Feb 7 at 21:39

200_success

123k14143401

1

-1 for bad advice. setTimeout, or setIntervalshould NEVER be used to render DOM animations. They run out of sync with the display, present new content immediately on exit, rather than delayed till Vsync, and continue even when page content is not visible, chewing up power and resources for no reason. Always use requestAnimationFrame for animating the DOM (and for that matter any type of DOM updates)
â€“Â Blindman67
Feb 8 at 3:30

1

@Blindman67 Thanks for the reminder. Incorporated into Rev 2.
â€“Â 200_success
Feb 8 at 3:33

add a commentÂ |Â

up vote
3
down vote

accepted

Please take care to use consistent indentation for your JavaScript, HTML, and CSS. In particular, avoid mixing spaces and tabs.

Avoid using meaningless variable names such as check and temp. In this case, you didn't even need temp, because:

If parseInt encounters a character that is not a numeral in the specified radix, it ignores it and all succeeding characters and returns the integer value parsed up to that point. parseInt truncates numbers to integer values. Leading and trailing spaces are allowed.

@keyframes slide 
 from left: 0; 
 to left: 180px; /* 200px - 20px */ 


#plan 
 width: 200px;
 height: 200px; 
 background: #00C0FF;
 position: relative;


#box 
 width: 20px;
 height: 20px;
 background: red;
 position: absolute;
 animation: 3.6s linear infinite alternate slide;

<div id="plan"><div id="box"></div></div>

edited Feb 8 at 3:33

answered Feb 7 at 21:39

200_success

123k14143401

Please take care to use consistent indentation for your JavaScript, HTML, and CSS. In particular, avoid mixing spaces and tabs.

Avoid using meaningless variable names such as check and temp. In this case, you didn't even need temp, because:

If parseInt encounters a character that is not a numeral in the specified radix, it ignores it and all succeeding characters and returns the integer value parsed up to that point. parseInt truncates numbers to integer values. Leading and trailing spaces are allowed.

@keyframes slide 
 from left: 0; 
 to left: 180px; /* 200px - 20px */ 


#plan 
 width: 200px;
 height: 200px; 
 background: #00C0FF;
 position: relative;


#box 
 width: 20px;
 height: 20px;
 background: red;
 position: absolute;
 animation: 3.6s linear infinite alternate slide;

<div id="plan"><div id="box"></div></div>

@keyframes slide 
 from left: 0; 
 to left: 180px; /* 200px - 20px */ 


#plan 
 width: 200px;
 height: 200px; 
 background: #00C0FF;
 position: relative;


#box 
 width: 20px;
 height: 20px;
 background: red;
 position: absolute;
 animation: 3.6s linear infinite alternate slide;

<div id="plan"><div id="box"></div></div>

@keyframes slide 
 from left: 0; 
 to left: 180px; /* 200px - 20px */ 


#plan 
 width: 200px;
 height: 200px; 
 background: #00C0FF;
 position: relative;


#box 
 width: 20px;
 height: 20px;
 background: red;
 position: absolute;
 animation: 3.6s linear infinite alternate slide;

<div id="plan"><div id="box"></div></div>

edited Feb 8 at 3:33

answered Feb 7 at 21:39

200_success

123k14143401

edited Feb 8 at 3:33

answered Feb 7 at 21:39

200_success

123k14143401

answered Feb 7 at 21:39

200_success

123k14143401

answered Feb 7 at 21:39

200_success

123k14143401

1

-1 for bad advice. setTimeout, or setIntervalshould NEVER be used to render DOM animations. They run out of sync with the display, present new content immediately on exit, rather than delayed till Vsync, and continue even when page content is not visible, chewing up power and resources for no reason. Always use requestAnimationFrame for animating the DOM (and for that matter any type of DOM updates)
â€“Â Blindman67
Feb 8 at 3:30

1

@Blindman67 Thanks for the reminder. Incorporated into Rev 2.
â€“Â 200_success
Feb 8 at 3:33

add a commentÂ |Â

1

-1 for bad advice. setTimeout, or setIntervalshould NEVER be used to render DOM animations. They run out of sync with the display, present new content immediately on exit, rather than delayed till Vsync, and continue even when page content is not visible, chewing up power and resources for no reason. Always use requestAnimationFrame for animating the DOM (and for that matter any type of DOM updates)
â€“Â Blindman67
Feb 8 at 3:30

1

@Blindman67 Thanks for the reminder. Incorporated into Rev 2.
â€“Â 200_success
Feb 8 at 3:33

-1 for bad advice. setTimeout, or setIntervalshould NEVER be used to render DOM animations. They run out of sync with the display, present new content immediately on exit, rather than delayed till Vsync, and continue even when page content is not visible, chewing up power and resources for no reason. Always use requestAnimationFrame for animating the DOM (and for that matter any type of DOM updates)
â€“Â Blindman67
Feb 8 at 3:30

@Blindman67 Thanks for the reminder. Incorporated into Rev 2.
â€“Â 200_success
Feb 8 at 3:33

add a commentÂ |Â

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

搜尋此網誌

trjhtr