jQuery UI Tabs with Smooth Transition

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/humanity/jquery-ui.css">
<script src="http://fonts.googleapis.com/css?family=Muli&amp;v2"></script>
<div>
<input type='text' class='searcheBox'>
  <button type="submit"><i class="fa fa-search"></i></button>
</div>

CSS

body {
    font: 12px/1.5 'Muli', sans-serif;
    background-color:	 red;
}
.searcheBox{
  position: absolute;
  top:50%;;
  left:45%;
}

JavaScript

if (typeof jQuery != 'undefined') {
    (function($, undefined) {        
        $(function() {
            $('#tabs').tabs();
        });
    })(jQuery);
}