Animate в Jquery

@favorit-93 · Регистрация: 12.12.2016

Студворк — интернет-сервис помощи студентам

Добрый день. Нужна помощь с учебной задачей, Звучит примерно так:
После щелчка по квадрату левая сторона квадрата движется к неподвижной правой, квадрат исчезает и опять появляется отодвигая правую границу (получается смещение на 1 квадрат) и так 5 раз. Потом обратно по 5 щелчкам div возвращается на место. Первое движение (слева на право к фиксированной стороне) получается только если указать привязку к правому краю (например right: 1000px), дальше я туплю, совсем не силен в js. Решать за меня задачу не прошу, подскажите хотя бы алгоритм как делать. Код сырой совсем:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script src="jquery.js"></script>
<script> 
$(function(){
$("div").toggle( 
 function() { 
$("div").animate({width:"-=100px"},function(){
$("div").animate({right:"-=100px"},);
$("div").animate({width:"+=100px"});
})
},
function() { 
 
//$("div").animate({width:"=100px"},function(){
//$("div").animate({width:"+=100px"});
})
})
})
</script>
<style> 
div {
background: red; 
height: 100px;
width: 100px;
position: fixed; 
right: 1000px;
 
</style>
<body>
 
<div> </div>
 
 
</body> 
</html>

@Balanaar · 09.10.2017, 17:20

https://codepen.io/anon/pen/YragKw

HTML5
1
<div id="square"></div>

CSS
1
2
3
4
5
6
#square {
  width: 100px;
  height: 100px;
  background: black;
  position: relative;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var square = $('#square'),
    steps = 0,
    dirRight = true,
    animating = false;
 
square.on('click', function() {
  if (!animating) move();
});
 
function move() {
  animating = true;
  dirRight ? steps++ : steps--;
  var anim1 = {
    width: 0
  }, anim2 = {
    width: 100
  }
  dirRight ? anim1.left = steps * 100 : anim2.left = steps * 100;
  square.animate(anim1, 1000, function() {
    square.animate(anim2, 1000, function() {
      if (steps >= 5 || steps <= 0) dirRight = !dirRight;
      animating = false;
    });
  });
}

@favorit-93 · 09.10.2017, 21:18 **[ТС]**

Спасибо большое.

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .

@favorit-93 0 / 0 / 0 Регистрация: 12.12.2016 Сообщений: 14
	09.10.2017, 21:18 [ТС]
	Спасибо большое. 0

Animate в Jquery

Решение