Анимация текста через Qjuery не работает

100

13 марта 2021, 10:30

var diraction = "right"; 
var offset0 = 0; 
 
if (diraction === "right") { 
  var movingRight = function() { 
    $("#heading").offset({ 
      left: offset0 
    }); 
    offset0++; 
  }; 
  var movingRightId = setInterval(movingRight, 30); 
  if (offset0 === 200) { 
    clearInterval(movingRightId); 
    diraction = "down"; 
    offset0 = 0; 
  } 
} else if (diraction === "down") { 
  var movingDown = function() { 
    $("#heading").offset({ 
      top: offset0 
    }); 
    offset0++; 
  }; 
  var movingDownId = setInterval(movingDown, 30); 
  if (offset0 === 200) { 
    clearInterval(movingDownId); 
    diraction = "left"; 
    offset0 = 0; 
  } 
}

<h1 id="heading">Hello world!</h1> 
 
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Я пытаюсь написать написать код, который сначала будет двигать надпись "Hello world" на 200 пикселей влево, а потом на 200 пикселей вниз. Но при запуске, ничего не происходит. Где ошибка?

Answer 1

var diraction = "right"; 
var offset0 = 0; 
 
function move() { 
  var movingRight = function() { 
    $("#heading").offset({ 
      left: offset0 
    }); 
    offset0++; 
  }; 
  var movingDown = function() { 
    $("#heading").offset({ 
      top: offset0 
    }); 
    offset0++; 
  }; 
  if (diraction === "right") { 
    if (offset0 === 200) { 
      diraction = "down"; 
      offset0 = 0; 
    } else { 
      movingRight(); 
    } 
  } else if (diraction === "down") { 
    if (offset0 === 200) { 
      diraction = "left"; 
      offset0 = 0; 
    } else { 
      movingDown(); 
    } 
  } 
} 
setInterval(move, 30);

#heading { 
  display: inline-block; 
  border: 3px solid gray; 
}

<h1 id="heading">Hello world!</h1> 
 
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Answer 2

Работа с таймерами обычно строится по следующей схеме:

// Объявляем id таймера.
var movingId;
// Функция, которая будет выполняться.
var moving = function() {
  // Здесь при определенных условиях удаляем таймер.
  clearInterval(movingId);
  // Если нужно, то запускаем таймер вновь.
  movingId = setInterval(moving, 10);
}
// Запускаем первый таймер.
movingId = setInterval(moving, 10);

var movingId, 
  position = 'left', 
  offset = 0; 
 
var moving = function() { 
  $("#heading").offset({ 
    [position]: offset++ 
  }); 
 
  // Если нужна поддержка старых браузеров 
  // var offseting = {}; 
  // offseting[position] = offset++; 
  // $("#heading").offset(offseting); 
 
  // Если достигли отступ в 200px. 
  if (200 === offset) { 
    // Очищаем таймер. 
    clearInterval(movingId); 
 
    // Если позиция смещения была слева. 
    if ('left' === position) { 
      // Меняем позицию смещения. 
      position = 'top'; 
 
      // Сбрасываем отступ. 
      offset = 0; 
 
      // Запускаем таймер для движения вниз. 
      movingId = setInterval(moving, 10); 
    } 
  } 
} 
 
// Запускаем таймер для смены позиции слева. 
movingId = setInterval(moving, 10);

body { 
  margin: 0; 
} 
 
#heading { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  display: inline-block; 
}

<h1 id="heading">Hello world!</h1> 
 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Ошибка Uncaught TypeError: $(…).tooltip is not a function at HTMLDocument - как решить? [закрыт]

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском

159

javascript

Получить data атрибут у последнего select

Помогите разобраться

javascript

Возврат на предыдущую страницу

Задача стоит следующая

102

javascript

Как попадают значения в $scope.$$childHead.input в angular 1?

Необходимо взять значение из angularcopy($scope