jquery addclass 和 hasclass 与 animate.css答案

【问题标题】：jquery addclass and hasclass with animate.cssjquery addclass 和 hasclass 与 animate.css
【发布时间】：2014-12-02 14:39:57
【问题描述】：

我正在尝试使用 addclass 和 hasclass 将 animate.css 动画添加到划分类。

<section class="main active">
 ...
</section>
<section class="aboutus">
    <h1>About Us</h1>
    <p class="aboutus-text">
    Text
    </p>
</section>

以上是我尝试制作动画的 HTML 代码。

所以当滚动到 aboutus 部分时，active 将从 main 中移除并添加到 aboutus 部分。

我尝试在 aboutus 部分中存在活动时使用它来检测和添加动画。

if($("section.aboutus").hasClass('active')) {
    $(".aboutus-text").addClass("animated fadeIn");
};

它不工作。我试图通过删除 if 语句来查看 addClass 是否正常工作，'animated fadeIn' 被添加到 aboutus-text。

谁能告诉我该怎么做？因为我只希望动画在 aboutus 处于活动状态时开始。

【问题讨论】：

看起来你的代码是在添加类的代码执行之前执行的
在 if 条件之前添加 console.log($("section.aboutus").attr('class')) 以查看存在哪些类
你能对你的代码做一个 jsfiddle 吗？
@ArunPJohny 我的控制台显示“关于我们的部分”
@YoannM 我也在使用这个js调用onepagescroll..所以我不知道如何自定义jsfiddle来拥有它..

标签： javascript jquery html css animation

【解决方案1】：

插件有afterMove()回调，需要用到

$(".main").onepage_scroll({
    easing: "ease",
    animationTime: 1000,
    afterMove: function () {
        if ($("section.aboutus").hasClass('active')) {
            $(".aboutus-text").addClass("animated fadeIn");
            $("section.aboutus").css({
                'display': 'block'
            });
        };
    }
});

【讨论】：