hamburger и ripple
Вложений: 2
Всем привет, подскажите пожалуйста как сделать так что бы при нажатии на 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-ом изображении я нажимаю на гамбургер |
GTRka, нужно вызвать событие, к которому привязана анимация, ease же.
/*Анимация гамбургера*/
$(function () {
$('.hamburger').on('click', function(e) {
if(!e.isTrigger)//если вызвано не скриптом
$('.ripple').click();
$(this).find('.hamburger--line').toggleClass('hamburger--line__x');
});
});
С .ripple тоже самое нужно сделать, только кликать на гамбургере. |
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();
});
});
|
GTRka,
http://api.jquery.com/trigger/ - если не разберётесь, то приведите html-код, желательно с рабочим параметром run: https://javascript.ru/formatting |
Белый шум,
С параметром ран не получается(( вот 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> |
Цитата:
<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>
|
| Часовой пояс GMT +3, время: 15:19. |