Форум

GTRka · #1 (**permalink**) 24.08.2017, 08:16

Всем привет, подскажите пожалуйста как сделать так что бы при нажатии на 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-ом изображении я нажимаю на гамбургер

Nexus · #2 (**permalink**) 24.08.2017, 09:42

GTRka, нужно вызвать событие, к которому привязана анимация, ease же.

/*Анимация гамбургера*/
$(function () {

    $('.hamburger').on('click', function(e) {
        if(!e.isTrigger)//если вызвано не скриптом
            $('.ripple').click();

        $(this).find('.hamburger--line').toggleClass('hamburger--line__x');
    });
    
});

С .ripple тоже самое нужно сделать, только кликать на гамбургере.

GTRka · #3 (**permalink**) 24.08.2017, 10:19

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();
      });
});

Белый шум · #4 (**permalink**) 24.08.2017, 11:14

GTRka,
http://api.jquery.com/trigger/
- если не разберётесь, то приведите html-код, желательно с рабочим параметром run: https://javascript.ru/formatting

GTRka · #5 (**permalink**) 24.08.2017, 11:49

Белый шум,
С параметром ран не получается((
вот html

<div class="flex_hero">
	<div class="flex-left">
		<div class="btn-round ripple menu">
			<div class="hamburger">
				<div class="hamburger--line"></div>
			</div>
		</div>
	</div>
</div>

Белый шум · #6 (**permalink**) 24.08.2017, 12:17

Сообщение от GTRka

Белый шум,
С параметром ран не получается((

Добавил e.stopPropagation(); и console.log(); в оба обработчика - судя по консоли, отрабатывают оба. А что там у вас с анимацией - смотрите код анимации.

<html><body>
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<div class="flex_hero">
	<div class="flex-left">
		<div class="btn-round ripple menu" style="width:300px;height:100px;background-color:red;">
			<div class="hamburger">
				<div class="hamburger--line" style="width:200px;height:10px;background-color:yellow;"></div>
			</div>
		</div>
	</div>
</div>

<script>
/*Анимация гамбургера*/
$(function () {
     
    $('.hamburger').on('click', function(e) {
e.stopPropagation();
        if(!e.isTrigger) //если вызвано не скриптом
        $('.ripple').click();

console.log('нажат гамбургер');
        $(this).find('.hamburger--line').toggleClass('hamburger--line__x');
    });
     
});
/*Анимация нажатия*/
$(document).on('click', '.ripple', function(e) {
 e.stopPropagation();
    if(!e.isTrigger) //если вызвано не скриптом
        $('.hamburger').click();
console.log('нажат риппл');

    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();
      });
});
</script>
</body></html>

Форум

Справочник

Discord чат

Курсы javascript