[英]Hover animation to one item instead of all items for a menu
I am trying to add a hover animation to my navigation items using Greensock animation platform. 我正在尝试使用Greensock动画平台将悬停动画添加到导航项中。 The animation works as I expect it to but it is applied to all the navigation items instead of just the item that is being hovered over.
动画的工作原理与我预期的一样,但是将其应用于所有导航项目,而不只是应用于悬停的项目。 Below is a link to the code and Codepen.
下面是代码和Codepen的链接。 Any help would be much appreciated.
任何帮助将非常感激。
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, }) });
<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>
https://codepen.io/rp20/pen/WdrwWP https://codepen.io/rp20/pen/WdrwWP
HTML 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 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 我希望这有帮助
That is because you have the same classname to all the buttons. 那是因为您对所有按钮都使用相同的类名。 Give each item a unique id and write mouseOver for individual ids.
为每个项目指定一个唯一的ID,然后为各个ID编写mouseOver。 Give unique id for item 1, item 2, item 3... and add item-1.mouseleave, item2.mouseleave
为项目1,项目2,项目3 ...指定唯一的ID,然后添加item-1.mouseleave,item2.mouseleave
You are currently selecting all elements with the underline class, but you can select the element to animate based on the element that is hovered. 当前,您正在选择带下划线类的所有元素,但是您可以根据悬停的元素选择要设置动画的元素。
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,
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.