Показать сообщение отдельно
  #3 (permalink)  
Старый 24.08.2017, 10:19
Новичок на форуме
Отправить личное сообщение для GTRka Посмотреть профиль Найти все сообщения от GTRka
 
Регистрация: 07.08.2017
Сообщений: 7

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();
      });
});
Ответить с цитированием