I am working on making a Navigation Bar, because it is entertaining, but when trying to make a slight fade on hover using animations, for some reason the javascript implemented hoverout is only working once, and then it never does it again until refreshed.
Why is that, and are there any alternatives to doing this in javascript.
let navChildren = [...document.getElementById('nav-container').children]
navChildren.forEach(x => {
x.addEventListener('click', () => {
})
x.addEventListener('mouseout', () => {
x.style.animation = 'hoverOut 1s forwards'
})
})ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
animation: hoverIn 0.5s forwards;
}
@keyframes hoverIn {
0% { background-color: #333; }
100% { background-color: #111; }
}
@keyframes hoverOut {
0% { background-color: #111; }
100% { background-color: #333; }
}
.active { background-color: #222; }<html>
<body>
<ul id = 'nav-container'>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>You need to remove the animation, then set it back to reset it:
let navChildren = [...document.getElementById('nav-container').children]
navChildren.forEach(x => {
x.addEventListener('click', () => {
})
x.addEventListener('mouseout', () => {
x.style.animation = "none";
setTimeout(function() {
x.style.animation = 'hoverOut 1s forwards'
}, 0)
})
})ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
animation: hoverIn 0.5s forwards;
}
@keyframes hoverIn {
0% {
background-color: #333;
}
100% {
background-color: #111;
}
}
@keyframes hoverOut {
0% {
background-color: white;
}
100% {
background-color: #333;
}
}
.active {
background-color: #222;
}<html>
<body>
<ul id='nav-container'>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>Although an easier way is just to use CSS transitions, no JavaScript required:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.5s;
}
li a:hover {
background-color: white;
}
@keyframes hoverOut {
0% {
background-color: white;
}
100% {
background-color: #333;
}
}
.active {
background-color: #222;
}<html>
<body>
<ul id='nav-container'>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>Add the animationend event listener to refresh the animation.
let navChildren = [...document.getElementById('nav-container').children]
navChildren.forEach(x => {
x.addEventListener("animationend",()=>x.style.animation = "none");
x.addEventListener('mouseout',()=>x.style.animation = 'hoverOut 1s forwards');
})ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
animation: hoverIn 0.5s forwards;
}
@keyframes hoverIn {
0% { background-color: #333; }
100% { background-color: #111; }
}
@keyframes hoverOut {
0% { background-color: #111; }
100% { background-color: #333; }
}
.active { background-color: #222; }<html>
<body>
<ul id = 'nav-container'>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>