TweenMax зависает не вызывает анимацию - PullRequest
Новая
       13

TweenMax зависает не вызывает анимацию

0 голосов
/ 07 ноября 2018

Я пытаюсь изменить ширину элемента 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>

1 Ответ

0 голосов
/ 07 ноября 2018

Вам не хватает 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>
...