如何仅在上一个悬停动画结束后才使下一个悬停动画开始？

Question

我需要隐藏一个元素，并在悬停时显示另一个元素。但是我有一个问题，当我有很多这样的元素并一个接一个地悬停在它们上时，悬停动画将同时作用于所有这些元素，但是我只需要在上一个动画结束时才开始新的悬停动画，我该如何制作这个？谢谢！

我的代码：

 $('.fractional-titles-wrapper').hover(function () {
    $(this).closest(this).find('.fractional-short-title').hide('slow')
    $(this).closest(this).find('.fractional-full-title').show('slow')
  }, function () {
    $(this).closest(this).find('.fractional-full-title').delay(1000).hide('slow')
    $(this).closest(this).find('.fractional-short-title').delay(1050).show('slow')
  })

Answer 1

setTimeout似乎是理想的解决方案。前一个动画结束时触发下一个动画。只需将时间设置为动画的长度，就可以了。

var explode = function(){
alert("Boom!");
};
setTimeout(explode, 2000);

希望这会有所帮助。