Сообщение от 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>