It doesn’t, span is actually inline from the beginning and you are not setting it anywhere to be inline-block. What happens here is that you have a left and right, so you tell it to start from the left value and end at the right value. You would have to check what you really want to do with your animation there?
Solution 1 :
Solution 2 :
This is probably what you wanted to see:
let j = 0;
let i = 0;
const demo = document.querySelector('#demo');
const button = document.querySelector('#btn');
function myFunction2() {
document.getElementById("demo").style.left = j + "px";
document.getElementById("demo").style.top = j + "px";
if (++j > 250) {
button.disabled = false;
}
}
function myFunction() {
button.disabled = true;
demo.classList.remove('animate');
j = 0;
i = 0;
while (i <= 250) {
setTimeout(myFunction2, (i**2)*0.01);
i++;
}
}
function raf(init = false) {
demo.classList.remove('animate');
if (init) {
j = i = 0;
}
requestAnimationFrame(() => {
let cnt = 0;
const newVal = `${j++}px`;
demo.style.left = demo.style.top = newVal;
j <= 250 && raf();
});
}
function cssAnimate() {
demo.style.left = demo.style.top = 0;
demo.classList.toggle('animate');
}#demo {
position: absolute;
text-align: center;
left: 0px;
top: 0px;
font-size: 30px;
background-color: powderblue;
border: 1px solid powderblue;
border-radius: 3px;
padding: 10px;
transform: none;
}
#demo.animate {
transition-delay: 1s;
transition: all 1s ease-out;
transform: translateX(250px) translateY(250px);
}
.submit {
position: relative;
top: 60px;
left: 20px;
}<span id="demo">Shift</span><br>
<button class="submit" id="btn" type="button" onclick="myFunction()">Try</button>
<button class="submit" type="button" onclick="raf(true)">Try RAF (without easing)</button>
<button class="submit" type="button" onclick="cssAnimate()">CSS animate</button>You have some typos in your inline style:
position:absolute;left:text-align:center;0px;
should be:
position: absolute; text-align: center; left: 0px;
then, in myFunction() you add right: 0px; and also in myFunction2() you add ‘left: 0px;’ and inrease this left value in the while loop. This 2 styles stretch your inline span between those 2 values (right: 0 and variable left). To fix it, just remove
document.getElementById("demo").style.right = "0px";
line from myFunction().
Some suggestions:
- use
requestAnimationFrame(RAF) instead ofsetTimeoutfor animation. RAF is executed just before browser rerender (approximately 60 times per second), whilesetTimeoutmay be executed ~250 times per second and ~75% of its code will not affect animation - use CSS file / section, instead of massive inline style, which is harder to read and test
- use
translate: transformX()instead ofposition: absolute;, which is cheaper in terms of browser performance (some info by Google)
I added RAF and CSS only examples.
Problem :
i want my span tag to move dynamicly with respect to time when i click the “Try” Button. It works perfectly but when i click it, the span tag starts to display as a block element, it encompasses the whole right block level but left. I just want it to display like it’s initial figure. How can i solve this ?
My code :
<html>
<head>
<script>
var j = 0;
var i = 0;
function myFunction2() {
document.getElementById("demo").style.left = j + "px";
document.getElementById("demo").style.top = j + "px";
j++;
}
function myFunction() {
document.getElementById("demo").style.right = "0px";
j = 0;
i = 0;
while (i <= 250) {
setTimeout(myFunction2, (i**2)*0.01);
i++;
}
}
</script>
</head>
<body>
<span id="demo" style="position:absolute;left:text-align:center;0px;top:0px;font-size:30px;background-color:powderblue;border:1px solid powderblue;border-radius: 3px;padding: 10px;">Shift</span><br>
<button id="submit" type="button" onclick="myFunction();" style="position: absolute; top: 60px; left: 20px;">Try</button>
</body>
</html>Comments
Comment posted by StackSlave
Nothing suggests that
Comment posted by jwdomain
Yes, code works properly. I think i messed the script a little bit and couldn’t get out of it, but i fixed it through the comment below. Thanks for the tip.
Comment posted by agrm
Actually, the span has
Comment posted by StackSlave
@agrm
Comment posted by jsfiddle.net/5uy0thvf
@StackSlave I agree to the fact that
Comment posted by jwdomain
Thank you for your help, i fixed it. I think i messed up something in my code.
Comment posted by jwdomain
can i ask one more thing ? When i click the button multiple times in a row, the block goes over my desired destination. As i click more rapidly, it goes further. How can i fix it ?
Comment posted by Andriy
one solution would be disable button while the block is in animation process. I added this to my answer (look for