Nexus,
Сделал вот так, теперь при нажатии на гамбургер он не анимирует, но если нажать рядом с гамбургером(ripple),гамбургер анимирует.
А нужно что бы куда бы я не нажал , на ripple или же на гамбургер была анимация обоих компонентов.
P.S. я не особо силен в этом, я только учусь)
/*Анимация гамбургера*/
$(function () {
$('.hamburger').on('click', function(e) {
if(!e.isTrigger) //если вызвано не скриптом
$('.ripple').click();
$(this).find('.hamburger--line').toggleClass('hamburger--line__x');
});
});
/*Анимация нажатия*/
$(document).on('click', '.ripple', function(e) {
if(!e.isTrigger) //если вызвано не скриптом
$('.hamburger').click();
var $ripple = $('<span class="rippling" />'),
$button = $(this),
btnOffset = $button.offset(),
xPos = e.pageX - btnOffset.left,
yPos = e.pageY - btnOffset.top,
size = 1,
animateSize = parseInt(Math.max($button.innerWidth(), $button.innerHeight()) * Math.PI);
$ripple.css({
top: yPos,
left: xPos,
width: size,
height: size,
backgroundColor: $button.attr("ripple-color"),
opacity: $button.attr("ripple-opacity")
})
.appendTo($button)
.animate({
width: animateSize,
height: animateSize,
// transform: 'scale(' + animateSize + ')',
opacity: 0
}, 500, function() {
$(this).remove();
});
});