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

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

希望这有帮助。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

或slideDown/slideUp：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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