Не могу понять , почему не работает обработчик кликов(последние 2 строки скрипта). Нужно , чтобы анимация останавливалась по клику на объект h1(
<!DOCTYPE html>
<html>
<head>
<title>Изучаем DOM</title>
</head>
<body>
<h1 id="heading">Привет, мир!</h1>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
var move="right";
var offset=0;
$("#heading").offset({left: offset, top: offset});
var moveHead = function() {
if (move==="right"){
$("#heading").offset({left:offset});
offset++;
if(offset>200){
offset=0;
move="down";
}
}
else if (move==="down"){
$("#heading").offset({top:offset});
offset++;
if(offset>200){
offset=200;
move="left";
}
} else if (move==="left"){
$("#heading").offset({left:offset});
offset--;
if(offset<0){
offset=200;
move ="up";
}
}
else if (move==="up") {
$("#heading").offset({top:offset});
offset--;
if (offset<0){
offset=0;
move="right"
}
}
};
var interval = setInterval(moveHead,20);
$("h1").click(clearInterval(interval));
</script>
</body>
</html>
Ответы (1 шт):
Автор решения: Paprika
→ Ссылка
Попробуйте var interval = setInterval(moveHead,20); $("h1").click(clearInterval(interval));
в функцию clearInterval передается идентификатор setInterval, который необходимо остановить.
var move="right";
var offset=0;
$("#heading").offset({left: offset, top: offset});
function moveHead() {
if (move==="right"){
$("#heading").offset({left:offset});
offset++;
if(offset>200){
offset=0;
move="down";
}
}
else if (move==="down"){
$("#heading").offset({top:offset});
offset++;
if(offset>200){
offset=200;
move="left";
}
} else if (move==="left"){
$("#heading").offset({left:offset});
offset--;
if(offset<0){
offset=200;
move ="up";
}
}
else if (move==="up") {
$("#heading").offset({top:offset});
offset--;
if (offset<0){
offset=0;
move="right"
}
}
};
var interval = setInterval(moveHead,30);
$("#heading").on('click', function(){
clearInterval(interval)
});