防止复杂的动画缓存？

Question

我有一个复杂的动画，当我鼠标悬停时会触发，当鼠标输出时会发生反向动画。但问题是，当我试图不断地盘旋而来时，动画卡住了。

下面是我的使用mouseenter和mouseout的代码，只是为了给你和想法：

$('body').on("mouseenter", '.template1 article', function(){

    $(this).addClass('nowAnimated');
    $(this).find('.articleHeadingWrapper').animate({height: "hide"}, 400, function() {

    $(this).parent().addClass('mainAnimatedClass');
    $(this).fadeIn(400, function() {
        $(this).find('.articleHiddenContent p').animate({opacity: "1"}, 400, function(){});
        console.log("hover in end")
    });


});     


});



$('body').on("mouseout", '.template1 article', function(){  

$(this).find('.articleHiddenContent p').animate({opacity: "0"}, 400, function(){

    $(this).parent().parent().parent().fadeOut(400, function(){

        $(this).parent().removeClass('mainAnimatedClass');
        $(this).parent().find('.articleHeadingWrapper').animate({height: "show"}, 400, function() {$(this).parent().removeClass('nowAnimated');});
        console.log("hover out end")
    });

});

});

有没有更好的方法来执行没有缓存的动画？感谢您提前了解。

更新： 我把代码放在这里： http://codepen.io/vincentccw/pen/deEFm