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 пикселей вниз. Но при запуске, ничего не происходит. Где ошибка?
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>
Работа с таймерами обычно строится по следующей схеме:
// Объявляем 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>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском
Необходимо взять значение из angularcopy($scope