Сообщение от Luther
|
приходиться дублировать, есть ли возможность объединения?
|
Можно и одним обработчиком, в нем ведь будет известен и тип события, и его источник. В какофонии сообщений я не заметил этого
"кнопка будет оставаться на своем месте и не налазить на меню, но ее анимация должна проигрываться, но только после открытия меню или закрытия". Не проблема, но наверное ее лучше запускать с определенного шага анимации (step), а не в конце ее. Например, пусть запуск анимации, это наличие класса 'hamburger--animate' у дочерних элементов кнопки, то есть:
.hamburger--animate .button-bar1 {
background-color: #fff;
transform: rotate(-45deg) translate(-8px, 7px);
}
.hamburger--animate .button-bar2 {
opacity: 0;
}
.hamburger--animate .button-bar3 {
background-color: #fff;
transform: rotate(45deg) translate(-7px, -7px);
}
которые добавляются им на определенном шаге анимации меню. При определении объектов определяем для меню данные, ну и запуск в шаге:
mobMenu = $(this).data({end: 1})
bt.on('click touchend', function (e, c) {
e.stopPropagation();
var dir = c ? 0 : !bt.hasClass(options.classActive); //направление в анимации
bt.toggleClass(options.classActive)
mobMenu.animate({[options.side]: -options.width + options.width * dir}, {
duration: options.animationSpeed,
step: function(pos, f) {
var v = f.start + f.end,
d = dir ? v - v * .3 //старт анимации кнопки при открытии
: v * .5; //старт анимации кнопки при закрытии
if($(this).data('end') && pos > d) {
bt.toggleClass('hamburger--animate'); //включаем анимацию/возвращаем в начало
$(this).data({end: 0}) //более не реагируем на изменения
}
},
complete: function(f) {
$(this).data({end: 1}) //разрешаем запуск анимации кнопки
}
});
})
Плюс различные временные характеристики анимации доступны, и тогда все может получится, по крайней мере лучше, чем по окончании анимации меню, на мой взгляд.