Нужно сделать остановку анимации с помощью click

94
10 июня 2021, 06:30
 <meta charset="UTF-8">
 <title>move</title>
 </head>
 <body>
 <h1 id="heading">Привет, мир!</h1>
 <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
 <script>

var leftOffset = 0;
var topOffset = 0;
var dir = "right";
var moveHeading = function () {$("#heading").offset({ left: leftOffset,                        top: topOffset})
if(dir == "right")    
leftOffset++;
else
leftOffset--;
if(leftOffset < 0 && topOffset > 0)
{
 leftOffset = 0;
 topOffset--;
}
else if(topOffset == 0)
{
 dir = "right";
}
if (leftOffset > 200) {
leftOffset = 200;
topOffset++;
if (topOffset > 200) {
 topOffset =200;
 dir = "left";
 }
 else if(topOffset < 0)
 {
 topOffset =0;
 }
 } 
 };

 setInterval(moveHeading, 30)
</script>
</body>
</html>
Answer 1

удалите интервал по клику

var leftOffset = 0; 
var topOffset = 0; 
var dir = "right"; 
 
var moveHeading = function() { 
  $("#heading").offset({ 
    left: leftOffset, 
    top: topOffset 
  }) 
  if (dir == "right") 
    leftOffset++; 
  else 
    leftOffset--; 
  if (leftOffset < 0 && topOffset > 0) { 
    leftOffset = 0; 
    topOffset--; 
  } else if (topOffset == 0) { 
    dir = "right"; 
  } 
  if (leftOffset > 200) { 
    leftOffset = 200; 
 
    topOffset++; 
    if (topOffset > 200) { 
      topOffset = 200; 
      dir = "left"; 
    } else if (topOffset < 0) { 
      topOffset = 0; 
    } 
  } 
}; 
 
 
var intervalId = setInterval(moveHeading, 30); 
 
$("#heading").on('click', function () { 
  clearInterval(intervalId); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<h1 id="heading">Привет, мир!</h1>

READ ALSO
как лучше спарсить xml?
javascript

как лучше спарсить xml?

есть такой xml

 79
Как активировать функцию после ввода символа @?
javascript

Как активировать функцию после ввода символа @?

Как активировать определённую функцию только после того как в определённое поле input введём символ @ ? Если такое вообще реальноСпасибо

 72
Фото/видео Галерея
CSS

Фото/видео Галерея

С помощью какой галереи лучше всего реализовать данную задачу? Показывается главное фото, снизу миниатюры + стрелки для переключения фото

 112
Следует ли интерфейсу состоять только из чистых виртуальных методов?
c++

Следует ли интерфейсу состоять только из чистых виртуальных методов?

Является ли хорошей практикой добавлять в интерфейс методы с имплементацией, которая основана поверх других методов этого интерфейса? Например:

 88