animate.css initializing with Jquery

Question

Well, animate.css makes it easy to add animations to any HTML element you want. What I would like to know: how do I initialize or add an animate.css animation using jQuery?

I searched the web, and found a few similar questions asked on StackOverflow , but the problem is I am not too knowledgeable about jQuery and hence thought I would post a specific question on this topic. I would appreciate anybody's help or guidance .

Below is my code.

<section id="meet-the-team">

<div class="container">
    <div class="gap "></div>
    <h1 class="center">Meet the Team</h1>
    <p class="lead center">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <div class="gap"></div>


        <div class="col-md-3 col-xs-6">
            <div class="center">
                <p><img class="img-responsive img-thumbnail img-circle" src="images/vet.JPG" alt="" ></p>
                <h5>David J. Robbins<small class="designation muted">Senior Vice President</small></h5>
                <p>Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor.</p>
                <a class="btn btn-social btn-facebook" href="#"><i class="icon-facebook"></i></a> <a class="btn btn-social btn-google-plus" href="#"><i class="icon-google-plus"></i></a> <a class="btn btn-social btn-twitter" href="#"><i class="icon-twitter"></i></a>
            </div>
        </div>

        <div class="col-md-3 col-xs-6">
            <div class="center">
                <p><img class="img-responsive img-thumbnail img-circle" src="images/vet.JPG" alt="" ></p>
                <h5>David J. Robbins<small class="designation muted">Senior Vice President</small></h5>
                <p>Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor.</p>
                <a class="btn btn-social btn-facebook" href="#"><i class="icon-facebook"></i></a> <a class="btn btn-social btn-google-plus" href="#"><i class="icon-google-plus"></i></a> <a class="btn btn-social btn-twitter" href="#"><i class="icon-twitter"></i></a>
            </div>
        </div>        
        <div class="col-md-3 col-xs-6">
            <div class="center">
                <p><img class="img-responsive img-thumbnail img-circle" src="images/vet.JPG" alt="" ></p>
                <h5>David J. Robbins<small class="designation muted">Senior Vice President</small></h5>
                <p>Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor.</p>
                <a class="btn btn-social btn-facebook" href="#"><i class="icon-facebook"></i></a> <a class="btn btn-social btn-google-plus" href="#"><i class="icon-google-plus"></i></a> <a class="btn btn-social btn-twitter" href="#"><i class="icon-twitter"></i></a>
            </div>
        </div>        
        <div class="col-md-3 col-xs-6">
            <div class="center">
                <p><img class="img-responsive img-thumbnail img-circle" src="images/vet.JPG" alt="" ></p>
                <h5>David J. Robbins<small class="designation muted">Senior Vice President</small></h5>
                <p>Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor.</p>
                <a class="btn btn-social btn-facebook" href="#"><i class="icon-facebook"></i></a> <a class="btn btn-social btn-google-plus" href="#"><i class="icon-google-plus"></i></a> <a class="btn btn-social btn-twitter" href="#"><i class="icon-twitter"></i></a>
            </div>
        </div>
    </div>
    </div>
</section><!--/#about-us-->

How do I add the class "animate BouceIn" when the page only scrolls to that part of the page i.e "meet-the-team"?

chemitaxis · Accepted Answer · 2014-07-25 11:02:20Z

2

You can extract the scroll position using jQuery's .scrollTop() method: Documentation

Adds the specified class(es) to each of the set of matched elements.

JavaScript (.js)

$(document).ready(function () {
    //$("#divToAnimate").hide();
    var topOfOthDiv = $("#firstDiv").offset().top;
    $(window).scroll(function () {
        if ($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?                
            $("#divToAnimate").addClass("animated bounceIn"); //reached the desired point -- show animation
        }
    });
});

HTML:

<body>
<div id="firstDiv">This is  the 1st Div </div>        
    <div id="divToAnimate"> 
        <img class="image-responsive image-thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png"/>
    </div>        
</body>

CSS

#firstDiv
{
    background-color:#eee;
    height:300px;     
}

Here you have a Fiddle that works: Example

Make the window of the fiddle smaller to check it ;)

edited Jul 25, 2014 at 11:02

answered Jul 25, 2014 at 8:26

chemitaxis

15.1k17 gold badges77 silver badges128 bronze badges

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

1 Comment

gautamz07 Over a year ago

thanks for your reply , i have made a Fiddle check it out jsfiddle.net/gautamz07/h8vGL now if you look closely , i have added an external library "animate.css" and to the 2nd div i have given a class "animated bounceIn" which is all it takes for the image in the secound div to give an effect of bounceIn when you run the fiddle(or on page load) , Now instead of adding the class "animated bounceIn" directly to the div , i want to dynamially update it when the page scrolls to the secound div . I am fairly new to Jquery . can you help me out and guide me as to how i can acheive this .

Collectives™ on Stack Overflow

animate.css initializing with Jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related