Question

我在基于引导程序的环境中使用animate.css和jQuery。但我有一个大问题！

我想在mouseenter / mouseleave上触发动画，因此我链接一些复杂的回调，现在它让我发疯了。

看看我的jQuery（因为其他插件而没有冲突模式）：

jQuery(document).ready(function () {

    var animationend = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
    var imgRotacion = "animated rotateOut";
    var h3Bounce = "animated bounceIn";
    var pFlip = "animated flipInX";
    var imgRotacionOff = "animated rotateIn";
    var h3BounceOff = "animated bounceOut";
    var pFlipOff = "animated flipOutX";


    jQuery(".procaption").on("mouseenter", function () {

        jQuery(this).find("img").addClass(imgRotacion).one(animationend, function () {
            jQuery(this).hide();
            jQuery(this).parent().find("h3").removeClass("hidden").addClass(h3Bounce).one(animationend, function () {
                jQuery(this).parent().find("p").removeClass("hidden").addClass(pFlip);
            });
        });
    });


    jQuery(".procaption").on("mouseleave", function () {
        jQuery(this).find("p").removeClass().addClass(pFlipOff).one(animationend, function () {
            jQuery(this).removeClass().addClass("hidden");
            jQuery(this).parent().find("h3").removeClass().addClass(h3BounceOff).one(animationend, function () {
                jQuery(this).removeClass().addClass("hidden");
                jQuery(this).parent().find("img").removeClass(imgRotacion).show().addClass(imgRotacionOff);
            });
        });
    });


});

HTML非常简单：

<div class="procaption wow fadeInLeft well text-center">
      <img src="holder.js/150x150" alt="150x150" class="img-responsive img-circle center-block">

      <h3 class="hidden">This is a title</h3>

      <p class="hidden">But this is a description!</p>
</div>

我想要实现的行为：好吧，我想链接所有动画，因此它们会在mouseenter和mouseleave事件中以某种顺序出现和消失。

实际上，只有在mouseleave的最后一个动画发生后触发mouseenter时才会“正常工作”。

如果我尝试mouseenter并立即mouseleave，<p>But this is a description!</p>行会与<img>一起出现......这不应该发生！

这是jsFiddle。

我确信应该有一些更简单的方法，但我只是在学习和练习......所以任何建议都会非常感激！

仅为了记录，我尝试在动画期间使用.procaption更改.procaptioning，直到最后一个回调完成，但无效:( 我也试过$(".procaptioning").on("mouseenter mouseleave", function() { return false; }) ......但没有成功。

Answer 1

您的.removeClass()功能正在搞乱事情，因为它们没有针对任何事情。实质上，快速上下移动将导致重叠函数创建意外结果，而无需指定在哪些时候删除哪些类。我还通过减少嵌套this使用和使用一致的选择器使代码更清晰。有关工作示例，请参阅此 FIDDLE 。

function onHoverIn(e) {
    var $caption = jQuery(this),
        $image = $caption.find('img'),
        $h3 = $caption.find('h3'),
        $desc = $caption.find('p');

    $image.addClass(imgRotacion).one(animationend, function () {
        $image.addClass('hidden');
        $h3.removeClass('hidden').addClass(h3Bounce).one(animationend, function () {
            $desc.removeClass(pFlipOff + ' hidden').addClass(pFlip);
        });
    });
}

function onHoverOut(e) {
    var $caption = jQuery(this),
        $image = $caption.find('img'),
        $h3 = $caption.find('h3'),
        $desc = $caption.find('p');

    $desc.removeClass(pFlip).addClass(pFlipOff).one(animationend, function () {
        $desc.removeClass(pFlipOff).addClass('hidden');
        $h3.removeClass(h3Bounce).addClass(h3BounceOff).one(animationend, function () {
            $h3.removeClass(h3BounceOff).addClass('hidden');
            $image.removeClass(imgRotacion).removeClass('hidden').addClass(imgRotacionOff);
        });
    });
}

jQuery(".procaption").hover(onHoverIn, onHoverOut);

在Mouseenter / Mouseleave上使用jQuery显示/隐藏链式CSS3动画

1 个答案: