Анимация одного блока при нажатии на другой блок

@LADYX · Регистрация: 19.02.2015

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

Помогите, пожалуйста, решить следующую задачу.

Скрипт - это иконка меню (три полоски), при нажатии на которую происходит анимация, и она становится крестиком. При повторном нажатии она снова преобразуется в три полоски, т.е. возвращается в исходное положение. Блок div с классом icon шириной 100%.

Нужно сделать так, чтобы при нажатии не только на иконку, но и на сам блок с классом icon, происходила анимация иконки.

Сейчас анимация иконки происходит непосредственно при нажатии на саму иконку.

Code
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
$(function() {
  $('.hmbrgr.four').hmbrgr({
    width: 30,
    height: 22,
    barHeight: 3,
    barRadius: 3,
    barColor: '#2a2a2a'
  });
});
 
(function($) {
 
  $.fn.hmbrgr = function(settings) {
 
    var config = $.extend({
      width: 30,
      height: 22,
      speed: 200,
      barHeight: 3,
      barRadius: 0,
      barColor: '#ffffff',
      animation: 'expand',
      onInit: null,
      onOpen: null,
      onClose: null
    }, settings);
 
    var posTop = 0,
      posMiddle = (config.height / 2) - (config.barHeight / 2),
      posBottom = config.height - config.barHeight;
 
    function hmbrgrBuild(el) {
      $(el)
        .css({
          'width': config.width,
          'height': config.height
        })
        .html('<span /><span /><span />')
        .find('span').css({
          'position': 'absolute',
          'width': '100%',
          'height': config.barHeight,
          'border-radius': config.barRadius,
          'background-color': config.barColor,
          'transition-duration': config.speed + 'ms'
        });
 
      hmbrgrSpanReset(el);
      $.isFunction(config.onInit) && config.onInit.call(this);
    }
 
    function hmbrgrSpanReset(el) {
      $(el)
        .data('clickable', true)
        .find('span').eq(0).css({
          'top': posTop
        });
 
      $(el)
        .find('span').eq(1).css({
          'top': posMiddle
        });
 
      $(el)
        .find('span').eq(2).css({
          'top': posBottom
        });
    }
 
    function hmbrgrCommand(el) {
      $(el).on('click', function(e) {
        e.preventDefault();
 
        if ($(this).data('clickable')) {
 
          $(this).data('clickable', false);
 
          $(el).toggleClass('cross');
 
          if ($(el).hasClass('cross'))
            hmbrgrExpand(el);
          else
            hmbrgrCollapse(el);
        }
      });
    }
 
    function hmbrgrExpand(el) {
      $(el).find('span').css({
        top: posMiddle
      });
 
      setTimeout(function() {
        $(el).addClass(config.animation).data('clickable', true);
        $.isFunction(config.onOpen) && config.onOpen.call(this);
      }, config.speed);
    }
 
    function hmbrgrCollapse(el) {
      $(el).removeClass(config.animation);
 
      setTimeout(function() {
        hmbrgrSpanReset(el);
        $.isFunction(config.onClose) && config.onClose.call(this);
      }, config.speed);
    }
 
    return this.each(function() {
      hmbrgrBuild(this);
      hmbrgrCommand(this);
    });
 
  };
 
}(jQuery));

Code
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
.icon {
  height: 42px;
  cursor: pointer;
  display: none;
  text-align: center;
}
.hmbrgr {
  position: relative;
  display: inline-block;
  margin-top: 10px;
}
 
.hmbrgr span {
  position: absolute;
  left: 0;
  width: 100%;
  background: #fff;
  display: inline-block;
}
 
.hmbrgr.expand span:nth-child(1) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
 
.hmbrgr.expand span:nth-child(2) {
  zoom: 1;
  filter: alpha(opacity=0);
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
}
.hmbrgr.expand span:nth-child(3) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

Code
1
2
3
4
5
<div class="icon">
  <section class="four">
    <a href="#" class="hmbrgr four"></a>
  </section>
</div>

@Давран · 31.07.2015, 20:13

LADYX, обверни код в js, а то с подсветка - вырви глаз

@LADYX · 31.07.2015, 22:07 **[ТС]**

Я не могу его уже отредактировать, к сожалению

@Armi · 01.08.2015, 22:28

Тут меняете класс

JavaScript
1
2
3
4
5
6
7
$('.hmbrgr.four').hmbrgr({
    width: 30,
    height: 22,
    barHeight: 3,
    barRadius: 3,
    barColor: '#2a2a2a'
  });

на

JavaScript
1
2
3
4
5
6
7
$('.icon').hmbrgr({
    width: 30,
    height: 22,
    barHeight: 3,
    barRadius: 3,
    barColor: '#2a2a2a'
  });

@LADYX · 02.08.2015, 13:20 **[ТС]**

Нет, это не решение вопроса.

@Armi · 02.08.2015, 16:08

Действительно код очень тяжело читается, вот этот фрагмент пробуйте от 70 строки.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(el).on('click', function(e) {
        e.preventDefault();
 
        if ($(this).data('clickable')) {
 
          $(this).data('clickable', false);
 
          $(el).toggleClass('cross');
 
          if ($(el).hasClass('cross'))
            hmbrgrExpand(el);
          else
            hmbrgrCollapse(el);
        }
      });

на

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('.icon').on('click', function(e) {
        e.preventDefault();
 
        if ($(this).data('clickable')) {
 
          $(this).data('clickable', false);
 
          $(el).toggleClass('cross');
 
          if ($(el).hasClass('cross'))
            hmbrgrExpand(el);
          else
            hmbrgrCollapse(el);
        }
      });

@LADYX · 02.08.2015, 21:29 **[ТС]**

Нет, этот вариант не работает. К тому же, в этом случае и при нажатии на саму иконку анимации не происходит.

@Armi · 03.08.2015, 09:44

Так еще попробуйте

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('.icon').on('click', function(e) {
        e.preventDefault();
 
        if ($(el).data('clickable')) {
 
          $(el).data('clickable', false);
 
          $(el).toggleClass('cross');
 
          if ($(el).hasClass('cross'))
            hmbrgrExpand(el);
          else
            hmbrgrCollapse(el);
        }
      });

Добавлено через 40 минут
http://jsfiddle.net/LLahdjar/7/ проверил на всякий работает

@LADYX · 03.08.2015, 11:32 **[ТС]**

Да, так всё работает, ура! БОЛЬШОЕ вам человеческое спасибо!!! Долгое время не мог получить помощь по этому вопросу, задавая его на разных форумах. А здесь всего-то и правок почти нет, минимум. Я вам очень благодарен за помощь! Спасибо!

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Киев стоит - украинская песня zorxor 28.01.2026 wfWdiRqdTxc О Господи, Вечный, Ты . . . Я помоги, Бесконечный. . . Я прошу Ты. . . Я погибаю, спаси. . . Я прошу Тебя Вечный. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@Давран 203 / 152 / 44 Регистрация: 24.11.2013 Сообщений: 1,106
	31.07.2015, 20:13
	LADYX, обверни код в js, а то с подсветка - вырви глаз 0

@LADYX 0 / 0 / 0 Регистрация: 19.02.2015 Сообщений: 12
	31.07.2015, 22:07 [ТС]
	Я не могу его уже отредактировать, к сожалению 0

@LADYX 0 / 0 / 0 Регистрация: 19.02.2015 Сообщений: 12
	02.08.2015, 13:20 [ТС]
	Нет, это не решение вопроса. 0

@LADYX 0 / 0 / 0 Регистрация: 19.02.2015 Сообщений: 12
	02.08.2015, 21:29 [ТС]
	Нет, этот вариант не работает. К тому же, в этом случае и при нажатии на саму иконку анимации не происходит. 0

@LADYX 0 / 0 / 0 Регистрация: 19.02.2015 Сообщений: 12
	03.08.2015, 11:32 [ТС]
	Да, так всё работает, ура! БОЛЬШОЕ вам человеческое спасибо!!! Долгое время не мог получить помощь по этому вопросу, задавая его на разных форумах. А здесь всего-то и правок почти нет, минимум. Я вам очень благодарен за помощь! Спасибо! 0

Анимация одного блока при нажатии на другой блок

Решение