одно событие-2 функции как?

@andrey31 · Регистрация: 02.08.2013

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

Здравствуйте, подскажите как реализовать условие. При клике на картинку запускается анимация. Нужно чтобы при повторном клике анимация возвращалась в исходное состояние, а когда кликаешь опять, снова повторялась бы. Намудрил вот такой код:

HTML5
1
<div align="center" class="photshop3" onclick="slide()" ><div align="center" class="anim" ><div class="svit"></div><div class="str"></div></div></div></div>

JavaScript
1
2
3
4
5
6
$(document).ready(function(){
    });
    
    function slide(){ $(".svit").animate({ top:"+=30px"}, 1000,
 
    function(){ $(".str").animate({ left:"-=110px"}, 15)})}

При клике див "svit" съезжает вниз ("str" в бок) и останавливаются как и задумано, но при повторном клике они снова двигаются от текущей позиции и уезжают за границы обертки "photshop3" , а нужно, чтобы дивы участвующие в анимации становились в исходное положение и по третьему клику анимация снова продолжалась бы. Подскажите как это реализовать?

@NetkovK · 02.08.2013, 17:16

JavaScript
1
2
3
4
5
6
7
8
9
$(document).ready(function(){
     $('.photshop3').toggle(function(){
          $(".svit").animate({ top:"+=30px"}, 1000,
          function(){ $(".str").animate({ left:"-=110px"}, 15)});
     },function(){
          $(".svit").animate({ top:"-=30px"}, 1000,
          function(){ $(".str").animate({ left:"+=110px"}, 15)});
     });
 });

@andrey31 · 04.08.2013, 09:38 **[ТС]**

Спасибо за код, я неправильно выразился. Нужно: первый клик: анимация дивов, остановка; второй клик: дивы возвращаются в исходное положение;
Я понимаю, что тут должна быть функция toggle, но путаюсь в синтаксисе в скобках, кавычках. У вас в коде, анимация возврата через запятую, поэтому все действия идут без остановки по одному клику

$(document).ready(function(){
$('.photshop3').toggle(function(){
$(".svit").animate({ top:"+=30px"}, 1000,
function(){ $(".str").animate({ left:"-=110px"}, 15)});
},function(){
$(".svit").animate({ top:"-=30px"}, 1000,
function(){ $(".str").animate({ left:"+=110px"}, 15)});
});
});

Думаю тут нужно разделить функции, но путаюсь в синтаксисе, а может я и не прав вовсе.

@vooduq · 04.08.2013, 12:18

.toggle больше не работает в таком формате

Добавлено через 9 минут

JavaScript
1
2
3
4
5
6
7
$(document).ready(function(){
     $('.photshop3').click(function(){
          if($('.svit').data('animated') == false)
          $(".svit").animate({ top:"+=30px"}, 1000,function(){ $(".str").animate({ left:"-=110px"}, 15) }).data('animated',true);
          else
          $(".svit").animate({ top:"-=30px"}, 1000,function(){ $(".str").animate({ left:"+=110px"}, 15) }).data('animated',false);
 });

попробуй так

@NetkovK · 04.08.2013, 15:02

JavaScript
1
2
3
4
5
$(document).ready(function(){
    $(".photshop3").click(function(){
        $(".svit").slideToggle("slow");
    });
});

@andrey31 · 05.08.2013, 09:37 **[ТС]**

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

.toggle больше не работает в таком формате

Добавлено через 9 минут

JavaScript
1
2
3
4
5
6
7
$(document).ready(function(){
     $('.photshop3').click(function(){
          if($('.svit').data('animated') == false)
          $(".svit").animate({ top:"+=30px"}, 1000,function(){ $(".str").animate({ left:"-=110px"}, 15) }).data('animated',true);
          else
          $(".svit").animate({ top:"-=30px"}, 1000,function(){ $(".str").animate({ left:"+=110px"}, 15) }).data('animated',false);
 });

попробуй так

ХМ.. по логике вещей должно работать, но не работает, работает если добавить в конце }); и поменять местами значения условий if и else. Но опять таки оба условия почему то работают за один клик.
А условие должно применяться только к переменной svit? Ко второй переменной ведь тоже применена функция анимации

@vooduq · 05.08.2013, 12:16

смотри в функции объекта .svit выполняется ф-ция .str, так что думаю нет нужды создавать внутреннюю дату) + событие применяется только к .svit`y
возможно попробуй окружить тело if и else рамками {}, т.к. двоная ф-ция может интерпретироваться как множество строк, а без рамок можно только для одной

но то что дата, клик и двойная анимация работает, в этом нет сомнения)

Добавлено через 2 минуты
скобли да забыл)
пробуй так

JavaScript
1
2
3
4
5
6
7
8
$(document).ready(function(){
     $('.photshop3').click(function(){
          if($('.svit').data('animated') == false) {
          $(".svit").animate({ top:"+=30px"}, 1000,function(){ $(".str").animate({ left:"-=110px"}, 15) }).data('animated',true); }
          else {
          $(".svit").animate({ top:"-=30px"}, 1000,function(){ $(".str").animate({ left:"+=110px"}, 15) }).data('animated',false); }
 });
 });

Новые блоги и статьи Все статьи Все блоги /
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .

@andrey31 4 / 4 / 0 Регистрация: 02.08.2013 Сообщений: 39
	04.08.2013, 09:38 [ТС]
	Спасибо за код, я неправильно выразился. Нужно: первый клик: анимация дивов, остановка; второй клик: дивы возвращаются в исходное положение; Я понимаю, что тут должна быть функция toggle, но путаюсь в синтаксисе в скобках, кавычках. У вас в коде, анимация возврата через запятую, поэтому все действия идут без остановки по одному клику $(document).ready(function(){ $('.photshop3').toggle(function(){ $(".svit").animate({ top:"+=30px"}, 1000, function(){ $(".str").animate({ left:"-=110px"}, 15)}); },function(){ $(".svit").animate({ top:"-=30px"}, 1000, function(){ $(".str").animate({ left:"+=110px"}, 15)}); }); }); Думаю тут нужно разделить функции, но путаюсь в синтаксисе, а может я и не прав вовсе. 0