Displaying/Hidding 在 Mouseenter/Mouseleave 上使用 jQuery 链接了 CSS3 个动画

Question

我在基于 bootstrap 的环境中使用 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 事件中以某种顺序出现和消失。

实际上，它是 "working"，但只有在 mouseenter 的最后一个动画发生后才触发 mouseleave。

如果我尝试 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);

Displaying/Hidding 在 Mouseenter/Mouseleave 上使用 jQuery 链接了 CSS3 个动画

Displaying/Hidding chained CSS3 animations with jQuery on Mouseenter/Mouseleave

javascript

jquery

css

css-animations