jquery - 使用 Jquery 在鼠标悬停后反转鼠标移出的动画

Question

我想创建动画，就像当我将鼠标悬停在一个 div 上时，另一个 div 将从顶部淡入，当我从 div 移开时，动画 div 将从顶部淡出。我为此编写了下面的代码，但无法将效果淡出到顶部。

$('.hotspot').mouseover(function () {
  $('.hotspotDesc').addClass('HotspotDesc-FadeIn')
  $('.hotspotDesc').show();
})
$('.hotspot').mouseleave(function () {
  $('.hotspotDesc').addClass('HotspotDesc-FadeOut')
  $('.hotspotDesc').hide();
})

.hotspotDesc {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    
}

.HotspotDesc-FadeIn {
    
    animation-name:HotspotDesc-FadeIn;
    -webkit-animation-name:HotspotDesc-FadeIn;
}

.HotspotDesc-FadeOut {
    
    animation-name:HotspotDesc-FadeOut;
    -webkit-animation-name:HotspotDesc-FadeOut;
}


@-webkit-keyframes HotspotDesc-FadeIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes HotspotDesc-FadeIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes HotspotDesc-FadeOut {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes HotspotDesc-FadeOut {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: none;
    transform: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="hotspot">
  Hover me
</div>

<div class="hotspotDesc" style="display:none;">
  Description will come here....
</div>

Answer 1

为什么不将 fadeIn/fadeOut 与悬停事件一起使用:

$('.hotspot').hover(function () {
  $('.hotspotDesc').fadeIn('slow');
},function () {
  $('.hotspotDesc').fadeOut('slow');
})

希望这有帮助。

$('.hotspot').hover(function () {
  $('.hotspotDesc').fadeIn('slow');
},function () {
  $('.hotspotDesc').fadeOut('slow');
})

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="hotspot">
  Hover me
</div>

<div class="hotspotDesc" style="display:none;">
  Description will come here....
</div>

或者slideDown/slideUp:

$('.hotspot').hover(function () {
  $('.hotspotDesc').slideDown('slow');
},function () {
  $('.hotspotDesc').slideUp('slow');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="hotspot">
  Hover me
</div>

<div class="hotspotDesc" style="display:none;">
  Description will come here....
</div>

如果您确实要使用自定义类，可以这样做:

$('.hotspot').mouseover(function () {
  $('.hotspotDesc').addClass('HotspotDesc-FadeIn')
  .removeClass('HotspotDesc-FadeOut')
  .show();
})
$('.hotspot').mouseleave(function () {
  $('.hotspotDesc').addClass('HotspotDesc-FadeOut')
  .removeClass('HotspotDesc-FadeIn')
  .show();
})

.hotspotDesc {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    
}

.HotspotDesc-FadeIn {
    
    animation-name:HotspotDesc-FadeIn;
    -webkit-animation-name:HotspotDesc-FadeIn;
}

.HotspotDesc-FadeOut {
    
    animation-name:HotspotDesc-FadeOut;
    -webkit-animation-name:HotspotDesc-FadeOut;
}


@-webkit-keyframes HotspotDesc-FadeIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes HotspotDesc-FadeIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes HotspotDesc-FadeOut {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes HotspotDesc-FadeOut {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: none;
    transform: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="hotspot">
  Hover me
</div>

<div class="hotspotDesc" style="display:none;">
  Description will come here....
</div>