Question

我正在尝试使用Greensock动画平台为我的导航项添加悬停动画。动画按照我的预期工作，但它应用于所有导航项而不仅仅是正在悬停的项目。下面是代码和Codepen的链接。任何帮助将非常感激。

＆＃13;

let $portfolioBtn = $('.portfolio-btn');
let $portfolioBtnUnderline = $('.portfolio-btn-underline');

$portfolioBtn.mouseover(function() {
  TweenMax.to($portfolioBtnUnderline, 0.5, {
    scaleX: 1,
    ease: Power4.easeInOut,
  })
});

$portfolioBtn.mouseleave(function() {
  TweenMax.to($portfolioBtnUnderline, 0.5, {
    scaleX: 0,
    ease: Power4.easeInOut,
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

<nav class="menu">
  <ul class="active">
    <li>
      <a class="portfolio-btn" href="#">About</a>
      <div class="portfolio-btn-underline"></div>
    </li>
    <li>
      <a class="portfolio-btn" href="#">Item 1</a>
      <div class="portfolio-btn-underline"></div>
    </li>
    <li>
      <a class="portfolio-btn" href="#">Item 2</a>
      <div class="portfolio-btn-underline"></div>
    </li>
    <li>
      <a class="portfolio-btn" href="">Item 3</a>
      <div class="portfolio-btn-underline"></div>
    </li>
    <li>
      <a class="portfolio-btn" href="#">Contact</a>
      <div class="portfolio-btn-underline"></div>
    </li>
  </ul>
</nav>

＆＃13;

https://codepen.io/rp20/pen/WdrwWP

Answer 1

HTML

  <nav class="menu">
      <ul class="active">
        <li>
          <a class="portfolio-btn" href="#">About</a>
        </li>
        <li>
          <a class="portfolio-btn" href="#">Item 1</a>
        </li>
        <li>
          <a class="portfolio-btn" href="#">Item 2</a>
        </li>
        <li>
          <a class="portfolio-btn" href="">Item 3</a>
        </li>
        <li>
          <a class="portfolio-btn" href="#">Contact</a>
        </li>
      </ul>
    </nav>

CSS

.portfolio-btn {
  position: relative;
  color: #000;
  text-decoration: none;
}
.portfolio-btn:hover {
  color: #000;
}
.portfolio-btn:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.portfolio-btn:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

I hope this helps

Answer 2

这是因为你对所有按钮都有相同的类名。为每个项目指定一个唯一ID，并为单个ID编写mouseOver。为项目1，项目2，项目3 ...添加唯一ID，并添加项目-1.mouseleave，item2.mouseleave

Answer 3

您当前正在选择具有下划线类的所有元素，但您可以根据悬停的元素选择要设置动画的元素。

let $portfolioBtn = $('.portfolio-btn');

$portfolioBtn.mouseover(function(){

  let $portfolioBtnUnderline = $( this ).next( '.portfolio-btn-underline' );

  TweenMax.to($portfolioBtnUnderline, 0.5, {
    scaleX:1,
    ease: Power4.easeInOut,
  })
});

$portfolioBtn.mouseleave(function(){
  let $portfolioBtnUnderline = $( this ).next( '.portfolio-btn-underline' );

  TweenMax.to($portfolioBtnUnderline, 0.5, {
    scaleX:0,
    ease: Power4.easeInOut,
  })
});

将动画悬停在一个项目而不是菜单的所有项目上

3 个答案: