鼠标悬停后使用Jquery在mouseout上反转动画

I want to create animation like when I mouseover on one div, another div will fade in from top and when I mouseout from div that animated div will fade out to top. I have written below code for this but not able to give effect fade out to top.

我想创建动画，就像当我将鼠标悬停在一个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>

2 个解决方案

#1

Why not using just fadeIn/fadeOut with hover event :

为什么不在悬停事件中使用fadeIn / fadeOut：

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

Hope this helps.

希望这可以帮助。

$('.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>

Or also slideDown/slideUp :

或者还有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>

If you've really to use the custom classes it could be done like :

如果您真的要使用自定义类，可以这样做：

$('.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>

#2

I think you need to remove the classes after the animation has finished or before the next animation is going to start:

我认为您需要在动画完成后或下一个动画开始之前删除类：

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