Ссылка на код: https://codepen.io/Nitahake/pen/YjZzpd
При наведении на ссылку первый раз воспроизведение эффекта очень резкое, а последующие наведения нормально работают, с чем это связано ?
$(function() {
let menuLink = $('.menu__link');
let span = '<span class="menu__line"></span>';
$(menuLink).on('mouseover', function() {
let menuLinkWidth = $(this).css('width');
for (let i = 1; i < 9; i++) {
$(this).append(span);
}
});
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.menu__list {
display: flex;
justify-content: center;
margin-top: 100px;
}
.menu__item {
list-style: none;
}
.menu__link {
display: inline-block;
vertical-align: top;
position: relative;
font-size: 3rem;
font-weight: 700;
line-height: 1;
padding: 0 1rem;
color: #000;
text-decoration: none;
}
.menu__line {
position: absolute;
top: 10px;
left: 0;
width: 0;
height: 2px;
background: #95A7FF;
transition: width .3s linear;
transition-delay: .3s;
}
.menu__line:nth-of-type(2) {
top: 15px;
left: 10%;
transition-delay: .4s;
}
.menu__line:nth-of-type(3) {
top: 20px;
left: 10%;
transition-delay: .5s;
}
.menu__line:nth-of-type(4) {
top: 25px;
left: 15%;
transition-delay: .6s;
}
.menu__line:nth-of-type(5) {
top: 30px;
left: 15%;
transition-delay: .7s;
}
.menu__line:nth-of-type(6) {
top: 35px;
left: 20%;
transition-delay: .8s;
}
.menu__line:nth-of-type(7) {
top: 40px;
left: 25%;
transition-delay: .9s;
}
.menu__link:hover .menu__line:nth-of-type(1),
.menu__link:hover .menu__line:nth-of-type(3),
.menu__link:hover .menu__line:nth-of-type(6) {
width: 80%;
}
.menu__link:hover .menu__line:nth-of-type(2) {
width: 70%;
}
.menu__link:hover .menu__line:nth-of-type(4) {
width: 90%;
}
.menu__link:hover .menu__line:nth-of-type(5),
.menu__link:hover .menu__line:nth-of-type(7) {
width: 60%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="menu">
<ul class="menu__list">
<li class="menu__item"><a href="#" class="menu__link">Adventure</a></li>
<li class="menu__item"><a href="#" class="menu__link">Crew</a></li>
<li class="menu__item"><a href="#" class="menu__link">Gallery</a></li>
<li class="menu__item"><a href="#" class="menu__link">Contact</a></li>
</ul>
</nav>