TweenMax悬停不触发动画

Question

I'm trying to change the width of a div with a border with a mouse hover on a link in another div, but the hover out is not returning the width back to 0.

 function over(){ TweenMax.to($(".grid-item-20"), 1, { width: "50%", ease: Expo.easeInOut }); }; function out(){ TweenMax.to($("grid-item-20"), 1, { width: "0", ease: Expo.easeInOut, }); }; $(".grid-item-17 a").hover(over, out); 

 .grid-item-20 { border-bottom: 1px solid #000; width: 0%; } 

 <div class="grid-item-17"> <a href="#">Home</a> </div> <div class="grid-item-20"> </div> 

Answer 1

You're missing the dot on your selector

function out(){
  TweenMax.to($(".grid-item-20"), 1, {
        width: "0",
        ease: Expo.easeInOut,
  });
};

 function over(){ TweenMax.to($(".grid-item-20"), 1, { width: "50%", ease: Expo.easeInOut }); }; function out(){ TweenMax.to($(".grid-item-20"), 1, { width: "0", ease: Expo.easeInOut, }); }; $(".grid-item-17 a").hover(over, out); 

 .grid-item-20 { border-bottom: 1px solid #000; width: 0%; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="grid-item-17"> <a href="#">Home</a> </div> <div class="grid-item-20"> </div>