Sliding effect with bounce

Question

I have used animate.css and jQuery as external libs. Is there a better way of doing what I have done with jQuery?

DEMO

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


            }
        });
    })
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css">
<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">1</li>
    <li data-prod="b" class="animated">2</li>
    <li data-prod="c" class="animated">3</li>
</ul>

Answer 1

Your demonstration could benefit from better semantic markup. In particular, the numbers on the left should be treated as navigation links, whose target is the item to be animated. If you remove all JavaScript and CSS, the functionality degrades gracefully.

An additional benefit is that the link directly identifies the item to be manipulated, so that you don't have to locate the element yourself using a var prodName = $(this).data('prod'); if (prodName == className) … check.

You don't need to define a .hide { display: none; } rule in your CSS. The jQuery $.hide() and $.show() methods can do that job.

Take care to localize $this.

$(document).ready(function () {
    $('nav > ul > li > a').on('click', function () {
        $('li.animated').hide();
        $($(this).attr('href')).each(function () {
            var $this = $(this);
            $this.show()
                 .removeClass('bounceInRight')
                 .addClass('bounceOutRight');
            setTimeout(function () {
                $this.removeClass('bounceOutRight')
                     .addClass('bounceInRight');
            }, 400);
        });
    })
});

nav > ul > li {
    display: inline-block;
    padding: 10px;
}
nav > ul > li > a {
    color: black;
    text-decoration: none;
}
ul {
    position: fixed;
    top: 0;
    right: 0;
    list-stlye: none;
}
nav > ul {
    right: auto;
    left: 0;
}
li.animated {
    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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css">
<nav>
    <ul>
        <li><a href="#a">1</a></li>
        <li><a href="#b">2</a></li>
        <li><a href="#c">3</a></li>
    </ul>
</nav>
<ul>
    <li class="animated" id="a">1</li>
    <li class="animated" id="b">2</li>
    <li class="animated" id="c">3</li>
</ul>

Answer 2

Could you write an answer explaining why and how pure JS would be better?

Pure JS is better for a few reasons: 1) better control over timing. With CSS animations, some browsers (Safari) will often sync various animations on the page together for better performance. Not the case with JS

2) better bounce. With JS you can pretty much use any logic you want for the animation. This means you can use a full-blown physics engine if you want to.

3) easily cancel, change the animation on the fly.

Of course, there are times when CSS based animations are more than good enough for the job. It seems to be the case in this situation. If you were gonna add touch controls with swipes, I would consider pure JS animations.