Анимация срабатывает только 1 раз

@LonerZzz · Регистрация: 21.04.2014

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

В js новичок. Нужно написать простой слайдер, так как паблик меня не устраивал.
Перейдём к делу.
Есть html код

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
35
36
<div class="container">
                <div class="about_us_text">Наши работы</div>
                <div class="about_us_full">
                    <div class="project">
                        <img src="images/1.png" width="390" height="220">
                        <div class="project-title">Возведение замка</div>
                        <div class="project-info">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
                    </div>
                    <div class="project">
                        <img src="images/2.png" width="390" height="220">
                        <div class="project-title">Не знаю что это</div>
                        <div class="project-info">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
                    </div>
                    <div class="project">
                        <img src="images/3.png" width="390" height="220">
                        <div class="project-title">Окно</div>
                        <div class="project-info">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
                    </div>
                    <div class="project">
                        <img src="images/4.png" width="390" height="220">
                        <div class="project-title">Окно</div>
                        <div class="project-info">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
                    </div>
                    <div class="project">
                        <img src="images/5.png" width="390" height="220">
                        <div class="project-title">Окно</div>
                        <div class="project-info">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
                    </div>
                    <div class="project">
                        <img src="images/6.png" width="390" height="220">
                        <div class="project-title">Окно</div>
                        <div class="project-info">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
                    </div>
 
                </div>
            </div>

есть js код.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function(){
    var width = $(".about_us_full").width();
 
    $( "#next" ).click(function(){
        var n = $( ".project" ).length;
        $( ".project" ).animate({
        'left':-1200
        }, 5000, function() {
            alert("da");
        });
    });
 
    $("#prev").click(function(){
        $(".project:nth-child(1)").appendTo(".about_us_full");
    })
 
});

при нажатии на кнопку next слайды должны сместиться влево на 1200 пикселей. При первом нажатии всё нормально. При втором - анимация не работает. В чём дело?
И второй вопрос. Почему alert(da) срабатывает 6 раз (количество <div class="project">), а не 1 после выполнения анимации? Как сделать чтобы срабатывал 1 раз?

@BANO · 12.06.2016, 20:39

LonerZzz, на второй вопрос отвечу, на первый нет, потому что не весь код есть
и так, вызывается 6 раз потому что анимация проводится для каждого найденного элемента, и соответственно колбек ставится для окончания анимации каждого найденного элемента

@LonerZzz · 12.06.2016, 22:13 **[ТС]**

Сообщение от BANO

потому что не весь код есть

вы про css?
если да..тогда вот

CSS
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
.about_us {
    width: 100%;
    background-color: white;
  padding: 80px 0;
}
 
 
.about_us_text {
    text-transform: uppercase;
    color: #333743;
    text-align: center;
    font-size: 22px;
}
 
.about_us_full {
    margin-top: 70px;
    width: 99999px;
    height: 309px;
    position: relative;
    
}
 
.project {
  width: 390px;
  margin-right: 15px;
  float: left;
  position: relative;
  display: table;
 
}
 
.project-title {
  font-size: 18px;
  color: #333743;
  font-weight: bold;
  margin: 8px 0;
}
.project-info {
  font-size: 14px;
  color: #737886;
  font-style: italic;
}
 
.clr:after {
  content: "";
  display: table;
  clear: both;
}
 
.container {
  max-width: 1200px;
  margin: 0 auto;
}

весь html

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
        <!DOCTYPE HTML>
<meta charset="utf-8">
<link href="slider.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="slider.js"></script>
    <body>
 
        <div class="about_us" id="projects">
            <div class="container">
                <div class="about_us_text">Наши работы</div>
                <div class="about_us_full">
                    <div class="project">
                        <img src="images/1.png" width="390" height="220">
                        <div class="project-title">Возведение замка</div>
                        <div class="project-info">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
                    </div>
                    <div class="project">
                        <img src="images/2.png" width="390" height="220">
                        <div class="project-title">Не знаю что это</div>
                        <div class="project-info">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
                    </div>
                    <div class="project">
                        <img src="images/3.png" width="390" height="220">
                        <div class="project-title">Окно</div>
                        <div class="project-info">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
                    </div>
                    <div class="project">
                        <img src="images/4.png" width="390" height="220">
                        <div class="project-title">Окно</div>
                        <div class="project-info">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
                    </div>
                    <div class="project">
                        <img src="images/5.png" width="390" height="220">
                        <div class="project-title">Окно</div>
                        <div class="project-info">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
                    </div>
                    <div class="project">
                        <img src="images/6.png" width="390" height="220">
                        <div class="project-title">Окно</div>
                        <div class="project-info">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
                    </div>
 
                </div>
            </div>
        </div>
        <div>       <button id="next" width=200 height = 100>Нажми меня</button>
                <button id="prev" width=200 height = 100>Нажми меня 2</button></div>
 
        </body>

Добавлено через 1 час 20 минут
Можно не отвечать. Вроде как разобрался. Дело было в

JavaScript
1
'left':-1200

нужно так

JavaScript
1
'left':-=1200

@BANO · 12.06.2016, 22:21

Сообщение от LonerZzz

нужно так

только вот так

JavaScript
1
'left': "-=1200"

@LonerZzz · 12.06.2016, 22:31 **[ТС]**

Сообщение от BANO

только вот так

а можно как-нибудь сделать так чтобы callback вызывался только 1 в конце всех анимаций?
а то костыли не очень

JavaScript
1
2
3
4
5
6
7
8
9
10
11
        $( ".project" ).animate({
        'left':'-=405'
        }, 500, function() {
            i++;
            if (i==6)
            {
                i = 0;
                $(".project:first-child").appendTo($(".about_us_full"));
                $(".project").css('left', 0);
            }
        });

@BANO · 12.06.2016, 22:53

LonerZzz, в самой jq такого не предусмотрено, но если и предлагать, то другой костыль, который будет работать на любое количество ваших блоков

JavaScript
1
2
3
4
5
6
7
8
9
(function() {
    var __s = false;
    return function() {
        if (__s) return;
        $(".project:first-child").appendTo($(".about_us_full"));
        $(".project").css('left', 0);
        __s = true;
    }
})()

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	12.06.2016, 20:39
	LonerZzz, на второй вопрос отвечу, на первый нет, потому что не весь код есть и так, вызывается 6 раз потому что анимация проводится для каждого найденного элемента, и соответственно колбек ставится для окончания анимации каждого найденного элемента 1

Анимация срабатывает только 1 раз

Решение