jQuery选项卡面板不能平滑地动画

Question

我正在学习jquery经过一些基本的练习后，我试图在其中添加一些内容的jquery标签，它们正在运行，但它们几乎没有问题。它们不会平滑滑动，内容div不会跟随标签，例如它显示标签1上的内容div 3

HTML：

<div id="mainDiv">    
    <div id="tabs">    
        <ul>        
            <li><div class="divClass active" title ="1" >Tab1</div></li>
            <li><div class="divClass" title="2" >Tab2</div></li>
            <li><div class="divClass" title="3" >Tab3</div></li>
        </ul>
    </div>    
    <div id="contentDiv">
        <div class="contDiv panelActive" id="1">div 1</div>
        <div class="contDiv" id="2">div 2</div>
        <div class="contDiv" id="3">div 3</div>
    </div>                       
</div>

JQUERY：

$(document).ready(function(){

$("#mainDiv #tabs ul li div ").on('click', function(){        
    var $attrVal = $(this).closest('#mainDiv');

    $attrVal.find('div.active').removeClass('active');
    $(this).addClass('active');

    var $contShow = $(this).attr('title');

    $attrVal.find('#contentDiv>.contDiv.panelActive').slideUp(500, 
    showNextPanel);

    function showNextPanel() {
        $(this).removeClass('panelActive');

        $('#'+$contShow).slideDown(500, function() {
            $(this).addClass('panelActive');
        });
        }

        });

        });