2011-08-17 118 views
2

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

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

因此,这里的bug的代码调用悬停,然后单击事件:

$('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(); 
}); 

基本上这个代码处理悬停动画和click事件。正如你在代码中看到的那样,它也应该处理那些似乎不起作用的鼠标移出动画。

任何有助于获得初始化的权利,将不胜感激(如果你得到鼠标移出的东西也工作,你将成为我的英雄)。

回答

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"); 



      } 

    ); 
0

据我所知,在点击函数中初始化jScrollPane没有任何理由。我把它放在点击绑定之外,并将它放在document.ready的顶部,并做了一些清理,现在它工作正常。这里有一个链接,显示它现在如何设置:http://jsfiddle.net/WLfGv/

+0

感谢您的努力保罗,但初始化jScrollPane外点击事件导致滚动条不工作。它是可见的,但它不可滚动(请参阅示例:http://herrmondl.multimediaart.at/_notwebsite/test/test2.html)。我之前就是这么做的,但是我看了一下开发者网站,他说我应该为动态更新的DIV重新初始化它。 – Major