jquery addclass and hasclass with animate.css

Question

I am trying to use addclass and hasclass to add animate.css animation to the division class.

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

The above is the HTML code that I am trying to animate.

So when scrolled to aboutus section, active will be removed from main and added to aboutus section.

I tried using this to detect and add animation when active exist in aboutus section.

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

It is not working. I tried to see if addClass is working properly by removing the if statement, 'animated fadeIn' is added to aboutus-text.

Anyone can tell me how do I do this? Because I only want the animation to start when aboutus is active.

looks like your code is executed before the code that is adding the class is executed — Arun P Johny
– Arun P Johny, Commented Oct 8, 2014 at 2:41
add console.log($("section.aboutus").attr('class')) just before the if condition to see what are the classes present — Arun P Johny
– Arun P Johny, Commented Oct 8, 2014 at 2:42
@YoannM I am using this js call onepagescroll also.. so I have no idea how to customize jsfiddle to have it.. — John
– John, Commented Oct 8, 2014 at 2:57

Arun P Johny · Accepted Answer · 2014-10-08 03:29:03Z

1

The plugin has an afterMove() callback, you need to use it

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

answered Oct 8, 2014 at 3:29

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery addclass and hasclass with animate.css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related