jquery-ui - jquery: 滑らかな効果で div を切り替えます

Question

私は使っている

$('.show_hide').click(function(){
    //$(".slidingDiv").slideToggle();
    $('#slidingDiv').fadeOut('500');
});

しかし、それはdivを非常に速く崩壊させます

これは私のスクリプトです：

<div class="search-form" id="search-form">
    <div class="slidingDiv" id="slidingDiv">
        Content goes here
    </div>
    <a class="show_hide" id="show_hide" style="display: inline;">Search slider</a>
</div>

一番下の灰色のバーをクリックすると、slideDiv divUp/Downを低速/スムーズな効果で切り替えたいと思います。すべてのコードを試しましたが、時間遅延も設定しましたが、非常に速く切り替わります。