how do i get .stop to work and make sure that the heading stops when i click and not where i click
Question
How do I make .stop make the heading stop where I click. and not move due to animation. only using javascript. I need the heading to stop where i click but i need to click on the heading to make it stop so i cannot click anywhere and the heading move there then stop, stop when i click where the heading is at.
<!DOCTYPE html>
<html>
<head>
<title>Interactive programming</title>
</head>
<body>
<h1 id="heading" style="position:absolute;">Watch the moving heading!</h1>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
function move() {
$("h1").animate({
"left": "+=200px"
}, "slow")
.animate({
"top": "+=200px"
}, "slow")
.animate({
"left": "-=200px"
}, "slow")
.animate({
"top": "-=200px"
}, "slow", function() {
setInterval(move(),300)
});
}
setInterval(move(),300)
//this should stop it
$("h1").click(function() {
$("h1").stop();
})
</script>
</body>
</html>
1 answers
solution1
0 2016-03-22 13:47:38
The 'setInterval' will keep running, so you will start a new animation after 300 ms, even though you call 'stop'.
The solution is to asssign 'setInterval' to a var, then you can call 'clearInterval'.
var interval = setInterval(move(),300);
});
}
var setinterval = setInterval(move(),300);
Now you can can stop the interval:
$("h1").click(function() {
clearInterval(interval);
$('h1').stop();
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.