jquery - jScrollPane won't reinitialise -

i've somehow struggled jscrollpane everytime i've used in past, managed make work in end. time i'm stumped , hoping can enlighten me.

i have animated items on page, after executing load external data div (#content). believe i've initialised , re-initialise correctly after animation completes nothing. else fires correctly except jscrollpane. here's css:

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

and here's 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 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');         });      });  }  });  });