0

过去每次使用 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');
        });

    });

}

});

});
4

0 回答 0