javascript - Decrease x value on svg inside loop -
this code should move(slowly) svg box x="4"
x="400"
. used simple loop js, , set jquery.
the box should start moving down site loaded, seems stuck in 1 place.
$(function() { var i; var down = setinterval(function() { move_down() }, 250); function move_down() { (i = 4, < 400, i++) { $("#block_green").attr({ y: }); } } });
body { margin: 0; overflow: hidden; } svg { background-color: black; width: 100vw; height: 100vh; } #block_green { fill: black; stroke: #00ff00; stroke-width: .5px; }
<!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <svg> <rect x="4" y="4" width="80" height="60" id="block_green" /> </svg> </body> </html>
you need change how incremented (don't need loop because set interval doing looping here.) additionally, had commas in loop statement, caused none of code run (js uses semicolons).
$(function() { var = 4; var down = setinterval(move_down, 250); function move_down() { $("#block_green").attr({ y: }); i++ } });
body { margin: 0; overflow: hidden; } svg { background-color: black; width: 100vw; height: 100vh; } #block_green { fill: black; stroke: #00ff00; stroke-width: .5px; }
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <svg> <rect x="4" y="4" width="80" height="60" id="block_green" /> </svg> </body> </html>
Comments
Post a Comment