javascript - 防止复杂的动画缓存？

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