Question

我已经在jQuery论坛上问了这个问题，但我没有得到答案。我对jScrollPane插件的初始化有问题。我设置了一个测试网站来说明它：http://herrmondl.multimediaart.at/_notwebsite/test/test.html

单击图片应更新整个左侧DIV。第一次单击图片效果很好但重复此过程会使“生物”部分消失。这肯定是因为jScrollPane插件的初始化错误。如果您（重新）加载网站并首先点击Urkel，您将看到自定义滚动条。

所以这里是调用悬停和点击事件的错误代码：

$('div.artistImg a').hover(function() {

    var currArtist = $(this).parent().find('div.artistName'),
        clicked = $(currArtist).hasClass('artistActive');

    if (!clicked) {
        $(currArtist).stop().css('top', '30px').show().animate({
            "top": "0px"
        }, "fast");
    }
}, function() {
    // if(!$clicked) {
    //       $(currArtist).stop()
    //           .css({
    //               'display': 'block',
    //               'top':'0px'
    //               })
    //           .animate({"top": "30px"}, "fast");    
}).bind('click', function(e) {
    $('div.artistActive').removeClass('artistActive');
    $(this).parent().find('div.artistName').addClass('artistActive');

    $('.artistWrap .artistDates').css('display', 'none');
    e.preventDefault();
    $("div.firstDates").hide().html($(this.hash).html()).fadeIn('slow');


    var api = $('.artistBio').jScrollPane({
        showArrows: false,
        verticalGutter: '1',
    });
    api.reinitialise();
});

这个代码基本上处理悬停动画和点击事件。正如您在代码中看到的那样，它还应该处理鼠标移动动画，这似乎也不起作用。

任何有助于初始化正确的帮助都会受到赞赏（如果你的鼠标输出工作也一样，你将成为我的英雄）。

Answer 1

我前段时间自己想通了。似乎我的.html（） - 方法导致了这个问题。使用.load（）工作得很好。所以这是更新的代码

$(function() {

    $('.artistBio').jScrollPane().data('jsp');

    $('div.artistImg a').hover(function(){

        ...

        },function(){

            ...

        }).bind('click',
            function(e)
            {
                $('div.artistActive').removeClass('artistActive');
                $(this).parent().find('div.artistName').addClass('artistActive');

                $('.artistWrap .artistDates').css('display', 'none');
                e.preventDefault(); 



                // retrieve the current file's url as .load() seems to need it
                var file = location.pathname.substr(location.pathname.lastIndexOf("/")+1,location.pathname.length);

                $("div.firstDates").hide().load(file + " " + this.hash, 
                        function()
                        {
                            $('.artistBio').jScrollPane().data('jsp').reinitialise();
                        }).fadeIn("slow");



            }

    );

Answer 2

据我所知，在click函数中初始化jScrollPane是没有道理的。我把它放在click bind之外，只是把它放在document.ready下面的顶部，并做了一点清理，它现在工作正常。这是一个显示如何立即设置的链接：http://jsfiddle.net/WLfGv/

jScrollPane初始化问题

2 个答案: