如何使下一个悬停动画只有在上一个悬停动漫结束后才开始

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

希望这能有所帮助。