Sliding effect with bounce
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 &gt; ul &gt; li &gt; 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 &gt; ul &gt; li {
    display: inline-block;
    padding: 10px;
}
nav &gt; ul &gt; li &gt; a {
    color: black;
    text-decoration: none;
}
ul {
    position: fixed;
    top: 0;
    right: 0;
    list-stlye: none;
}
nav &gt; 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;
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css"&gt;
&lt;nav&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#a"&gt;1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#b"&gt;2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#c"&gt;3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/nav&gt;
&lt;ul&gt;
    &lt;li class="animated" id="a"&gt;1&lt;/li&gt;
    &lt;li class="animated" id="b"&gt;2&lt;/li&gt;
    &lt;li class="animated" id="c"&gt;3&lt;/li&gt;
&lt;/ul&gt;