[GTRka]

Всем привет, подскажите пожалуйста как сделать так что бы при нажатии на ripple(пульсация) так же запускалась анимация гамбургера? То есть когда я нажимаю на гамбургер анимация и ripple срабатывают, но когда я нажимаю на ripple анимация ripple срабатывает но анимация гамбургера нет)
Как бы эти 2 кода объеденить?

/*Анимация гамбургера*/
$(function () {
    
    $('.hamburger').on('click', function() {
        $(this).find('.hamburger--line').toggleClass('hamburger--line__x');
    });
    
});

/*Анимация нажатия*/
$(document).on('click', '.ripple', function(e) {
 
    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();
      });
});

на 1-ом изображении я нажимаю рядом с гамбургером, ripple срабатывает но гамбургер не анимирует
на 2-ом изображении я нажимаю на гамбургер