Add Animation to jQuery Content Tabs.

<style type="text/css">

#tabs-bar {
background: #f0f0f0;
padding:10px 8px;
}

#tabs-bar ul {
display: block;
list-style: none;
float: left;
}

#tabs-bar ul li {
list-style: none;
display: block;
float: left;
padding-right: 10px;
}

#tabs-nav li a {
list-style: none;
display: block;
padding:10px 15px;
background: #c0c0c0;
font-size: 16px;
font-weight: 300;
color: #fff;
text-align: left;
border-top:1px solid #ececec;
border-right:1px solid #ececec;
border-bottom:1px solid #ececec;
border-left:1px solid #ececec;
border-radius: 5px;
text-decoration: none;
}

#tabs-nav li a.current, #tabs-nav li a:hover {
border-bottom:0px solid #ececec;
background: #ee3636;
}

#tabs-content-wrap {
background: #f6f6f6;
padding: 10px;
margin-top: 8px;
}

#tabs-content-wrap ul {
display: block;
list-style: none;
}

#tabs-content-wrap ul li {
width: 100%;
list-style: none;
display: block;
list-style: none;
}

.tab-content {
border-radius: 2px;
padding-bottom: 20px;
}

</style>

<script src="jquery-1.11.1.min.js"></script>

<div id="tabs-bar">
    <ul id="tabs-nav">
        <li><a id="one" href="#th-tab-one">TAB ONE</a>
        </li>
        <li><a id="two" href="#th-tab-two">TAB TWO</a>
        </li>
        <li><a id="three" href="#th-tab-three">TAB THREE</a>
        </li>
    </ul>
    <div style="clear:both;"></div>
</div>
<!-- ends tabs-bar -->

<!-- Tabs Main Content -->
<div id="tabs-content-wrap">
    <ul>
        <li id="th-tab-one" class="tab-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inciddunt ut labore et dolore magna aliqua nostrud exercitation.</li>
        <!-- Ends Tab One Content -->

        <li id="th-tab-two" class="tab-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inciddunt ut labore et dolore magna aliqua nostrud exercitation.</li>
        <!-- ends Tab Two Content -->

        <li id="th-tab-three" class="tab-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inciddunt ut labore et dolore magna aliqua nostrud exercitation.</li>
        <!-- ends Tab Three Content -->
    </ul>
</div>

<script type="text/javascript">

$(function () {
$('.tab-content:not(:first)').hide();
$('#tabs-nav a').bind('click', function (e) {
e.preventDefault();
$this = $(this);
$target = $(this.hash);
$('#tabs-nav a.current').removeClass('current');
$('.tab-content:visible').slideUp("slow", function () {
$this.addClass('current');
$target.slideDown("slow");
});
}).filter(':first').click();
});

</script>


Output :)

1)

2)

3)