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

我想创建动画，比如当我将鼠标移到一个div上时，另一个div将从顶部淡入，当我将鼠标从div上移出时，动画div将从顶部淡出。我已经写了下面的代码，但不能给效果淡出顶部

$（'.hotspot'）.mouseover（函数（）{
$（'.hospotdesc'）.addClass（'hospotdesc-FadeIn'））
$（'.hospotdesc'）.show（）；
})
$（'.hotspot'）.mouseleave（函数（）{
$（'.hospotdesc'）.addClass（'hospotdesc-FadeOut'））
$（'.hospotdesc'）.hide（）；
})

.hospotdesc{
-webkit动画持续时间：1s；
动画持续时间：1s；
-webkit动画填充模式：两者都有；
动画填充模式：两者都有；
}
.HotspotDesc FadeIn{
动画名称：HotspotDesc FadeIn；
-webkit动画名称：HotspotDesc FadeIn；
}
.HotspotDesc淡出{
动画名称：HotspotDesc淡出；
-webkit动画名称：HotspotDesc淡出；
}
@-webkit关键帧热点描述FadeIn{
从{
不透明度：0；
-webkit转换：translate3d（0，-10%，0）；
转换：translate3d（0，-10%，0）；
}
到{
不透明度：1；
-webkit转换：无；
转化：无；
}
}
@关键帧HotspotDesc FadeIn{
从{
不透明度：0；
-webkit转换：translate3d（0，-10%，0）；
转换：translate3d（0，-10%，0）；
}
到{
不透明度：1；
-webkit转换：无；
转化：无；
}
}
@-webkit关键帧热点描述淡出{
从{
不透明度：1；
-webkit转换：translate3d（0,10%，0）；
转换：translate3d（0,10%，0）；
}
到{
不透明度：0；
-webkit转换：无；
转化：无；
}
}
@关键帧热点描述淡出{
从{
不透明度：1；
-webkit转换：translate3d（0,10%，0）；
转换：translate3d（0,10%，0）；
}
到{
不透明度：0；
-webkit转换：无；
转化：无；
}
}

盘旋我
描述会在这里出现。。。。

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

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

---

为什么不在悬停事件中仅使用

fadeIn/fadeOut

：

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

希望这有帮助

$（'.hotspot'）。悬停（函数（）{
$（'.hostpotdesc'）.fadeIn（'slow'）；
}，函数（）{
$（'.hostpotdesc'）.fadeOut（'slow'）；
})

盘旋我
描述会在这里出现。。。。

这里是fiddle也被推荐使用正确的jQuery方法来解决这个问题。我想从顶部淡入，这就是为什么我不使用简单的淡入淡出。您可以随时定制jQuery的淡入淡出。检查这个：检查我的帖子的最后一部分@vedankitakumbhar，如果你已经开始使用那些cutom类了。。非常感谢你@ZakariaAcharkiI还认为更好的方法是使用jQuery中的

slideUp

和

slideDown

，正如另一个答案所指出的那样。