javascript - javascriptを使用してクリック時にセクションをフェードさせますか?

Question

したがって、上記の質問の表現はおそらく不十分ですが、ここで明確にしておきましょう。複数のセクションに分割された html ページがあります。右側と左側のセクションがあり、各セクションにはさらに分割する div があります。これらの div の 1 つは rscontent と呼ばれ、右側にコンテンツが保持されます。リンクをクリックすると、rscontent のすべてを閉じる必要があります。これを行うコードは次のとおりです。

    $('section#rightpanel').on('click', 'a#rsclose', function (event) {
    var $_closer = $(this);

    var $_sectionNav = $('header.sectionNav'); // needs to adjust size

    var $_sectionBody = $('section#body'); // needs to adjust size

    var $_rightpanel = $('section#rightpanel'); // needs to collapse this


    if ($_rightpanel.is('.collapsed')) {
        // is closed, so open it
        $_rightpanel.removeClass('collapsed').find('.rscontent').show();
        $_sectionBody.css('width', '56%');
        $_rightpanel.css('width', '34%');
        $_closer.html('Close');
    } else {
        // is open, so close it
        $_rightpanel.addClass('collapsed').find('.rscontent').hide();
        $_sectionBody.css('width', '90%');
        $_rightpanel.css('width', '2.8%');
        $_closer.html('Open');
    } // collapsed
    return false;
});

これで機能しますが、私の質問は、フェード効果を追加して、一瞬で終了しないようにする方法です。CSSコードからこれを取得しましたが、使用方法がわかりません。

    .fade {
 -webkit-transition: all 500ms linear;
 -moz-transition: all 500ms linear;
 -o-transition: all 500ms linear;
 -ms-transition: all 500ms linear;
}

誰でもこれを行う方法を知っています。質問が理にかなっていることを願っています。前もって感謝します！