Reverse animation on mouseout after mouseover using Jquery

Question

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.

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

Why not using just fadeIn/fadeOut with hover event :

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

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

Answer 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');
})