I'm trying to make a jquery wave effect for the buttons, when you click on them, a wave is generated that is displayed by the whole button, but I have problems changing the background.
$(function(){
$('.wave').on('click', function(e){
e.preventDefault();
var $waveElement = $('<span class="wave-effect" style:"background-color: rgb(0,0,0)"; />'),
$buttonElement = $(this),
btnOffset = $buttonElement.offset(),
xPos = e.pageX - btnOffset.left,
yPos = e.pageY - btnOffset.top,
size = parseInt(Math.min($buttonElement.height(), $buttonElement.width()) * 0.5),
animateSize = parseInt(Math.max($buttonElement.height(), $buttonElement.width()) * Math.PI);
$waveElement.css({
top: yPos,
left: xPos,
width: size,
height: size,
})
.appendTo($buttonElement)
.animate({
width: animateSize,
height: animateSize,
opacity: 1
}, 550, function(){
$(this).remove();
});
});
});
$(document).ready(function(){
$(".menu li:has(ul)").click(function(e){
e.preventDefault();
if($(this).children("a").hasClass("activated1")){
$(this).children("a").removeClass("activated1");
$(this).children("ul").slideUp();
} else{
$(".menu li ul").slideUp();
setTimeout(() => {
$(".menu li").children("a").removeClass("activated1");
}, 250);
setTimeout(() => {
$(this).children("a").addClass("activated1");
}, 250);
$(this).children("ul").slideDown();
}
})
})*{
margin:0;
padding:0;
text-decoration:none;
list-style: none;
font-family:"Josefin Sans", sans-serif;
}
.head{
height: 85px;
background-color: #2b2b2b;
width: 100%;
}
body{
background: #0b2027;
}
.center{
width: 90%;
margin:-85px auto 0 auto;
}
header{
background-color: #2b2b2b;
height: 85px;
font-size: 20px;
}
header>a{
float: left;
height: 20px;
font-size: 35px;
line-height: 85px;
color:white;
}
header>a>span{
font-size: 40px;
color:blue;
}
header ul{
display: flex;
justify-content: space-between;
width: 25%;
height: 85px;
margin-left: 37.5%;
}
header ul li{
height: 20px;
line-height: 85px;
}
header ul li a{
color: white;
}
header ul li a:hove r{
color: #206eff;
}
aside{
margin: 50px 0 ;
width: 25%;
display: inline-block;
line-height: 25px;
border-radius: 4px;
}
aside ul{
width: 100%;
overflow: hidden;
background: blue;
}
.menu{
border-radius: 5px;
}
.menu a{
display: block;
color: black;
padding: 15px 20px;
background: rgb(220, 220, 220);
transition: .3s;
position: relative;
}
.fa-chevron-down{
float: right;
position: absolute;
right: 20px;
top: 30%;
}
aside>ul>li>a:hover{
background: rgb(180, 180, 180);
}
aside ul li ul li a{
background: rgb(160, 160, 160);
transition: 125ms ease;
}
aside ul li ul {
display: none;
}
aside ul li ul li a:hover{
transform: translate(10px);
}
.activated1{
background-color: #206eff!important;
}
.wave{
overflow: hidden;
position: relative;
box-sizing: border-box;
transform: translate3d(0,0,0);
}
.color{
background-color: red;
}
.wave-effect{
position: absolute;
border-radius: 50%;
/* background-color: rgba(0, 0, 0, 1); */
padding: 0;
margin: 0;
opacity: 1;
transform: translate3d(-50%,-50%,0);
}
.main{
float: right;
margin: 50px 0;
height: 800px;
width: 70%;
background: white;
border-radius: 5px;
}<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./Styles/css.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<title>Calculadoras</title>
</head>
<body>
<div class="head"></div>
<div class="center">
<header>
<a href="index.html"><span>Physics</span> calculator</a>
<ul>
<li><a href="#">CALCULADORAS</a></li>
<li><a href="#">MATERIAS</a></li>
</ul>
</header>
<aside>
<ul class="menu">
<li><a href="#" class="wave">Electrotecnia<i class="fas fa-chevron-down"></i></a>
<ul>
<li><a href="#">Item 01</a></li>
<li><a href="#">Item 02</a></li>
<li><a href="#">Item 03</a></li>
<li><a href="#">Item 04</a></li>
</ul>
</li>
<li><a href="#" class="wave">Laboratorio de mediciones eléctricas<i class="fas fa-chevron-down"></i></a>
<ul>
<li><a href="#">Item 01</a></li>
<li><a href="#">Item 02</a></li>
<li><a href="#">Item 03</a></li>
<li><a href="#">Item 04</a></li>
</ul>
</li>
<li><a href="#" class="wave">termodinámica<i class="fas fa-chevron-down"></i></a>
<ul>
<li><a href="#">Item 01</a></li>
<li><a href="#">Item 02</a></li>
<li><a href="#">Item 03</a></li>
<li><a href="#">Item 04</a></li>
</ul>
</li>
</ul>
</aside>
<div class="main"></div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="./Math/index.js"></script>
<script src="./Styles/Wave.js"></script>
<script src="./Styles/aside.js"></script>
</html>It is assumed that when I click on the outside buttons, a blue expansive wave must be made to then stay that color, but if it is already that color, I want that when the shock wave is generated it is the color initial, to make it look like a transition