如何按悬停，点击和悬停的顺序触发三个单独的动画按顺序完成？

Question

我有一个三步动画，它是通过将鼠标悬停，点击并将鼠标悬停（按此顺序）触发我想要按顺序完成的。动画的每个步骤必须在下一个动画发生之前完成。理想情况下，在整个动画完成之前重复鼠标悬停，单击并悬停，不会对其他动画进行排队。

例如，假设每个动画的持续时间为2秒： 用户将元素悬停在元素上以激活1秒钟，点击，然后将其悬停。

预期的行为应如下： 总动画持续时间为6秒，动画由悬停超过发生并首先完成触发，动画由点击发生并完成第二次触发，动画由悬停发生并完成第三次触发。

$('#elem').hover({
    function() {
        // stepOneAnimation
    },
    function() {
        // stepThreeAnimation
    }
});

$('#elem').click(function() {
    // stepTwoAnimation
});

我觉得我应该使用queue / dequeue但是文档很稀疏，而且我不太确定如何根据我的具体情况定制示例。谢谢你的帮助。