Add eventlistener last jump1 function not runing ?

Question

I want to make a jump button ,when i will click jump button,
It going to up and come to down.

My code is here :
Which is not working

https://code.sololearn.com/WGh1CEsi4Du3/?ref=app

Answer 1

Add a class with jump animation
.jump {
animation: jump 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s 1;
}

@keyframes jump {
50% {
bottom: 450px;
}
}

Then add the jump class when onClick event triggered, with timeout to remove jump class later.

https://code.sololearn.com/Wp07RUDhWJ8K/?ref=app

Answer 2

Sajid Ali cubic-bezier is defined in your code, I just copied from your code.

Answer 3

Your code jump on 450px and just back to 350px. For this reason the interpretation of this code is so that the 450px will be overwritten with 350 px. The position stay the same.

Answer 4

The easier solution on basis of your code will be differenting the time points of this two positions,
for example with code as follows:

oh.addEventListener("click", jump = ()=> {
ob.style.bottom = "450px";
setTimeout(() => {
if(ob.style.bottom >= "440px")
ob.style.bottom = "350px";
},400)
}

https://code.sololearn.com/WHW56E8AKMvI/?ref=app

Answer 5

Calviղ can you explain ? What is cubic bez... ?