禁用链接，直到css动画完成

Question

我正在使用animate.css来创建悬停操作。在mouseenter上我fadeinDown并淡化文本覆盖到网站上的图像。在mouseleave上我fadeOut和fadeOutUp文本叠加。

在其中两张图片中，有一个链接。它工作正常，除了没有悬停的移动浏览器。当用户点击图像（例如iOS Safari）时，动画效果会显示包含链接的文本。然而，经常发生的是用户点击图像，他们也点击链接（即使它还没有出现） - 在这种情况下，用户将用户发送到不同的网站。

我希望发生的是（在iOS和其他非悬停平台上），用户可以在禁用链接的情况下单击图像，让动画效果显示文本，然后启用链接动画完成。

我现在正在用jQuery做这个 - 所有动画的图像都是类'caption'，带链接的图像是'FE'类。

这似乎有用 - 有点好。很难解释，它似乎照顾到禁用链接，但它通常需要几次按下才能让它再次充当链接。

    $(".FE").hover(
function(){
$('.caption').click (function(ev) {
    ev.preventDefault();
    });
   $('.caption, FE').bind('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function() {
   $(this).unbind('click').click()
    });
});

我不是一个JS / JQuery专家，上面是用几个小时的谷歌搜索拼凑而成的。希望有人可以对正确的编码方式有所了解。