i am having below code:
$(function() {
$("#buttonID").click( function() {
// stop funcName() running
});
});
$(function funcName(){
// some scripts will run on page load
});
My question is how can i stop funcName() running when click at #buttonID.
Thank you guys.
EDIT: This is the script that will run on page load: https://jsfiddle.net/1t8z3Ls2/1/ (i found this script on Google. this script will make a div child become sticky to it's parent div.)
I want to make this script stop runnig by clicking on a button.
Thanks again.
In the following code:
- You have one red div
- You have one button
- In the CSS you have one animation declared but not used
- When page is loaded, the first JS block code will be automatically executed, this block of code will assign animation 'moveRight' to div 'player'
- The animation will make the player div move to the right for one second
- If user click on the button 'Stop Animation', the function stopMoving() will be executed to stop the player div from moving
Good luck!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
#player {
min-width: 80px;
min-height: 80px;
background-color: red;
position: absolute;
top: 10%;
left: 0%;
}
@keyframes moveRight {
0% {
top: 10%;
left: 0%;
}
20% {
top: 10%;
left: 20%;
}
40% {
top: 10%;
left: 40%;
}
60% {
top: 10%;
left: 60%;
}
80% {
top: 10%;
left: 80%;
}
100% {
top: 10%;
left: 100%;
}
}
</style>
<button onclick="stopMoving()">Stop Animation</button>
<div id="player"></div>
<script>
//This code will be executed on page load.
//It will give the div 'player' an animation to make it move to the right
let player = document.getElementById("player");
player.style.animationName = "moveRight";
player.style.animationDuration = "60s";
player.style.animationFillMode = "forwards";
function stopMoving() {
//This function will be executed when user click on the button.
//This function will stop the div from moving to the right
player.style.animationName = "";
}
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With