1

Ссылка на код: 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>

1 ответ 1

0

Разобрался сам, у меня span-ы добавлялись после наведения на элемент, но до этого стили для них уже были, вот и резко отображались

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.