jquery - jScrollPane は再初期化されません

Question

過去に jScrollPane を使用するたびに、どういうわけか苦労しましたが、最終的には常に機能させることができました。しかし今回は完全に困惑しており、誰かが私を啓発できることを望んでいます。

私のページには、外部データを div (#content) にロードする実行後にアニメーション化されたアイテムがいくつかあります。アニメーションの完了後に正しく初期化して再初期化したと思いますが、何も得られません。jScrollPane 以外はすべて正常に起動します。CSSは次のとおりです。

#content { margin-top: 30px; position: absolute; left: 120px; right: 20px; max-width: 900px !important; height:300px; overflow: auto; z-index: 99; }

そして、ここにjsがあります：

g_index = -1;


$(function() {

//jscrollpane settings
var settings =
{
    // showArrows: true
};
var pane = $('#content')
pane.jScrollPane(settings);
var api = pane.data('jsp');

$('#nav > .circle').mouseenter(

function () {

    var index = $(".circle").index(this);
    var $this = $(this);

if(index != g_index) {

    g_index = index;

    $('.circle a').removeClass('engtext');
    $('#content, #bgimage').fadeOut(250, function() {
    $('#bgimage').removeClass('bgl bgr');
    });
    $('.animate').stop().animate({
        'width'     :'100px',
        'height'    :'100px',
        'top'       :'0px',
        'left'      :'0px',
        'opacity'   :'1.0'
    },1000,'easeOutQuad',function(){
        //animation complete
    });

    $this.find('a').addClass('engtext');
    $this.find('.animate').stop().animate({
        'width'     :'1100px',
        'height'    :'1100px',
        'top'       :'-300px',
        'left'      :'-300px',
        'opacity'   :'0.7'
    },500,'easeOutQuad',function(){
        //animation complete
        var target = $this.find('a').attr('href');
        target = target.replace('#','');
        $('#content').css('left', (index * 120) + 120 );
        $('#content').load(target + '.html', function() {
                // when target page has loaded do the below
                $(this).fadeIn(250);
                api.reinitialise();

                if(g_index < 2) {
                    $('#bgimage').addClass('bgr');
                    $('#bgimage').attr('src','img/footer_' + target + '.png');
                }
                else {
                    $('#bgimage').addClass('bgl');
                    $('#bgimage').attr('src','img/footer_' + target + '.png');
                }
                $('#bgimage').fadeIn(250);
        });

        //all animation complete
        $('.animate').filter(':animated').promise().done(function() {
            $('.circle').removeClass('z1');
            $this.addClass('z1');
        });

    });

}

});

});