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

我正在一个基于引导的环境中使用和jQuery。 但是我有一个大问题

我想在

mouseenter

/

mouseleave

上触发动画，所以我链接了一些复杂的回调集，现在这让我发疯了

看看我的jQuery（由于其他插件的原因，没有冲突模式）：

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

事件中以某种顺序出现和消失

实际上，它正在“工作”，但只有在

mouseenter

的最后一个动画发生后触发

mouseleave

时才会工作

如果我尝试

mouseenter

并立即

mouseleave

，

但是这是一个描述
 

行与

一起出现。。。那不应该发生

这是最新消息。

我相信应该有更简单的方法，但我只是在学习和练习。。。因此，任何建议都将不胜感激

为了记录，我尝试在动画期间使用

.procapting

更改

.procapting

，直到最后一次回调完成，但没有成功：( 我还尝试了

$（.procapting”）.on（“mouseenter mouseleave”，function（）{return false；}）

…但没有成功。

您的

.removeClass（）

函数会搞乱事情，因为它们没有针对任何对象。从本质上说，快速悬停和关闭会导致重叠函数产生意外结果，而不会指定在什么时候删除哪些类。我还通过减少嵌套的

此

用法和使用一致的选择器，使代码更清晰。有关工作示例，请参见此

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);

---

据我所知，

.removeClass（）

旨在删除所有类，因此我使用的不是

.removeClass（pFlipOff+'hidden'）

而是

.removeClass（）

。不管怎么说，你使用了某种语义，对我来说真的很新，我不知道你可以在jQuery中声明这样的变量。有什么区别吗？我应该如何用谷歌搜索它？那是纯javascript吗？它工作得很好！非常感谢你的时间！说真的：）我很高兴，很高兴它能帮上忙。按照惯例，我在jQuery对象变量前面加了一个

$

，但它们只是常规变量，如果看起来很奇怪的话，当然可以省略美元符号。哈哈，你是对的，

.removeClass（）

删除分配给DOM元素的所有类，只是碰巧发生了一个问题，但没有被错误地使用：）

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);