TweenMax懸停不觸發動畫

Question

我正在嘗試在另一個div的鏈接中使用鼠標懸停更改帶有邊框的div的寬度，但是懸停不會將寬度恢復為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

您缺少選擇器上的dot

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>