Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.64/11: Рейтинг темы: голосов - 11, средняя оценка - 4.64
0 / 0 / 0
Регистрация: 19.02.2015
Сообщений: 12

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

31.07.2015, 15:36. Показов 2288. Ответов 8
Метки нет (Все метки)

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

Скрипт - это иконка меню (три полоски), при нажатии на которую происходит анимация, и она становится крестиком. При повторном нажатии она снова преобразуется в три полоски, т.е. возвращается в исходное положение. Блок 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>
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
31.07.2015, 15:36
Ответы с готовыми решениями:

Появление блока при нажатии на другой блок
Мне нужно чтобы по нажатию на блок div#trigger блок DIV#filter появлялся и скрывался, а по нажатию на div#filter_butt только скрывался. В...

Есть блок покупки. При нажатии на кнопку одного элемента этого блока нужно присвоить его свойства другому(например фото)
Есть блок покупки. При нажатии на кнопку одного элемента этого блока нужно присвоить его свойства другому(например фотографию) ...

Открыть закрыть блок при нажатии по ссылке и закрыть его при нажатии вне этого блока
Здравствуйте, несколько дней уже пытаюсь решить задачу, мне нужно сделать блок с авторизацией. Нужно что бы при нажатии на ссылку блок...

8
 Аватар для Давран
203 / 152 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
31.07.2015, 20:13
LADYX, обверни код в js, а то с подсветка - вырви глаз
0
0 / 0 / 0
Регистрация: 19.02.2015
Сообщений: 12
31.07.2015, 22:07  [ТС]
Я не могу его уже отредактировать, к сожалению
0
312 / 106 / 69
Регистрация: 18.04.2015
Сообщений: 346
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'
  });
1
0 / 0 / 0
Регистрация: 19.02.2015
Сообщений: 12
02.08.2015, 13:20  [ТС]
Нет, это не решение вопроса.
0
312 / 106 / 69
Регистрация: 18.04.2015
Сообщений: 346
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);
        }
      });
1
0 / 0 / 0
Регистрация: 19.02.2015
Сообщений: 12
02.08.2015, 21:29  [ТС]
Нет, этот вариант не работает. К тому же, в этом случае и при нажатии на саму иконку анимации не происходит.
0
312 / 106 / 69
Регистрация: 18.04.2015
Сообщений: 346
03.08.2015, 09:44
Лучший ответ Сообщение было отмечено LADYX как решение

Решение

Так еще попробуйте
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/ проверил на всякий работает
1
0 / 0 / 0
Регистрация: 19.02.2015
Сообщений: 12
03.08.2015, 11:32  [ТС]
Да, так всё работает, ура! БОЛЬШОЕ вам человеческое спасибо!!! Долгое время не мог получить помощь по этому вопросу, задавая его на разных форумах. А здесь всего-то и правок почти нет, минимум. Я вам очень благодарен за помощь! Спасибо!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
03.08.2015, 11:32
Помогаю со студенческими работами здесь

Вернуть стандартный цвет блока при нажатии на другой
Доброго времени суток! Помогите пожалуйста разобраться с jQuery :) Есть 10 div'ов с одним классом, по умолчанию они чёрные) При нажатии...

Изменение одного блока при наведении на другой
.box{ cursor: pointer; font-size: 24px; display: block; } .box2{ color: blue; font-size: 24px; display: block; }

При нажатии на определенный блок, цвет этого блока должен меняться.
Есть вот такой вот код: var a = document.getElementByClass('green'); document.addEventListener('click', rim); function rim(){ ...

Изменение фоновой картинки одного блока при наведении на другой
Добрый вечер.Верстаю макет, ломаю голову над одним моментом, а именно: Есть блок wrapper, внутри которого находится меню, задача - при...

Всплывание блока, при наведении на другой блок
При наведении на красный или синий блок должен поверх него всплывать другой блок (которому задан класс .tip), а при уходе мыши обратно...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Новые блоги и статьи
Инструменты 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 и т. д. Сборка примера Скачайте. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru