How to animate stuff with animate.css and Jquery

Question

I have following code pieces

HTML

<ul id="test">
    <li class="a">1</li>
    <li class="b">2</li>
    <li class="c">3</li>
</ul>
<ul id="test2">
    <li data-prod="a" class="animated">
        <div>1</div>
        <div>2</div>
        <div>3</div>        
    </li>
    <li data-prod="b" class="animated hide">
        <div>1</div>
        <div>2</div>
        <div>3</div> 
    </li>
    <li data-prod="c" class="animated hide">
        <div>1</div>
        <div>2</div>
        <div>3</div> 
    </li>
</ul>

CSS

ul#test > li {
    display: inline-block;
    padding: 10px;
    cursor: pointer;
}
#test {
    position: fixed;
    top: 0;
    left: 0;
}
#test2 {
    position: fixed;
    top: 0;
    right: 0;
    list-style: none;
}
#test2 > li {
    background: yellow;
    width: 350px;
    height: 600px;
    /* transition: height 0.3s ease, width 0.2s ease;*/
    overflow: hidden;
    margin-top: -30px;
    padding-top: 30px;
    margin-right: -50px;
}
.hide {
    display: none;
}

And this jquery

$(document).ready(function () {

    $('#test li').on('click', function () {

        var className = $(this).attr('class');
        $('#test2 > li').each(function () {

            var prodName = $(this).data('prod');


            if (prodName == className) {

                $('#test2 > li').removeClass('bounceInRight').addClass('bounceOutRight');
                $this = $(this);
                setTimeout(function () {
                    console.log(this);
                    $('#test2 > li').addClass('hide')
                    $this.removeClass('hide bounceOutRight').addClass('bounceInRight');
                }, 400);


            }
        });
    })
});

Here is the DEMO

I have few questions

For each click on li of ul with id #test it animates the appropriate li of ul that has id #test2. How do I animate each div in lis as fadeInTop (animate.css) one after another without using classes and ids (just using tag selectors) once the li has completed the animation.
Is there a better way of doing what i have done with jquery with better performance. I have added this part of question in codereview

Have you taken a look at the in-built jquery functions, like hide, fadeIn and fadeOut? — Phoenix
– Phoenix, Commented Apr 17, 2015 at 4:49
@Phoenix Yea, But i want to do this with animate.css and jquery doesnt have fadeIn from top kind of animation — It worked yesterday.
– It worked yesterday., Commented Apr 17, 2015 at 4:50
Try this if you after animations with effects and no css files -- julian.com/research/velocity — Tasos
– Tasos, Commented Apr 17, 2015 at 5:15

anpsmn · Accepted Answer · 2015-04-17 05:39:54Z

You can add a callback for the animation. Without removing and adding class you can't repeat an animation.

               $(document).ready(function () {

        $('#test li').on('click', function () {

            var className = $(this).attr('class');
            $('#test2 > li').each(function () {

                var prodName = $(this).data('prod');


                if (prodName == className) {

                    $('#test2 > li').removeClass('bounceInRight').addClass('bounceOutRight');
                    $this = $(this);
                    $this.find('div').removeClass('fadeInDown');
                    setTimeout(function () {
                        console.log(this);
                        $('#test2 > li').addClass('hide')
                        $this.removeClass('hide bounceOutRight').addClass('bounceInRight');
                    }, 400);

                    
                }
            });
          
        })
        
        $('#test2 li').on('oanimationend animationend webkitAnimationEnd', function() { 
            $(this).find('div').each(function(i){
               var $this = $(this);
                setTimeout(function(){
                  $this.addClass('animated fadeInDown')
                },i*500);
                
            })
        });
    });

    ul#test > li {
        display: inline-block;
        padding: 10px;
        cursor: pointer;
    }
    #test {
        position: fixed;
        top: 0;
        left: 0;
    }
    #test2 {
        position: fixed;
        top: 0;
        right: 0;
        list-style: none;
    }
    #test2 > li {
        background: yellow;
        width: 350px;
        height: 600px;
        /* transition: height 0.3s ease, width 0.2s ease;*/
        overflow: hidden;
        margin-top: -30px;
        padding-top: 30px;
        margin-right: -50px;
    }
    .hide {
        display: none;
    }
    ul#test2 > li div {  padding: 5px; transform: translate3d(0,-2000px,0)}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet" />

<ul id="test">
  <li class="a">1</li>
  <li class="b">2</li>
  <li class="c">3</li>
</ul>
<ul id="test2">
  <li data-prod="a" class="animated hide">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </li>
  <li data-prod="b" class="animated hide">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </li>
  <li data-prod="c" class="animated hide">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </li>
</ul>

Thank you :) This helps me a lot. i want to animate those divs one after one in the order of 1, 2, 3. Could you please help me with that

Collectives™ on Stack Overflow

How to animate stuff with animate.css and 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