Lavalamp不能在HTML中工作

Question

編輯：我的新問題是http://jsfiddle.net/Rochefort/QzXNv/不工作LAVALAMP。

// OLD // 我有一個菜單結構。用下面的：

<div id="navigation"><!-- navigation --> 
        <ul> 
         <li class="first"><a class="active" href="#">News 5</a></li> 
         <li><a href="#">News</a></li> 
         <li><a href="#">News 1</a></li> 
         <li><a href="#">News 2</a></li> 
         <li><a href="#">News 3</a></li> 
         <li class="last"><a href="#">News 4</a></li> 
        </ul> 
       </div> 

我的CSS：

#navigation { 
    float: right; 
    margin: 20px 0 0; 
} 

#navigation ul { 
    padding: 0; 
    margin: 0; 
    list-style-type: none; 
} 

#navigation ul li { 
    float: left; 
    display: inline; 
    margin: 0 30px 0 0; 
    padding: 0; 
} 

#navigation ul li.last { 
    margin: 0; 
} 

#navigation ul li a { 
    color: #333; 
    font-family: 'helvanltpro55romanregular'; 
    font-size: 14px; 
    text-decoration: none; 
} 

並補充lavalamp.js在我的jQuery目錄。並寫下這個代碼：

//document ready 
    $(document).ready(function(){ 
     // SLIDING MENU // 
    $('#navigation').lavaLamp({ 
     homeTop:0, 
     homeLeft:-50, 
     returnHome:true 
    }); 

    var hasActive = $('ul#navigation li a').hasClass('active'); 

    if(hasActive) { 
     var activeIndex = $('ul#navigation li a.active').parent().index(); 
    } 

    $('ul#navigation').hover(function(){ 
     $('ul#navigation li a').removeClass('active'); 
    }, function(){ 
     setTimeout(function(){ 
      $('ul#navigation li:eq('+ activeIndex +') a').addClass('active'); 
     },500); 
    }); 
    // SLIDING MENU // 

但不工作這個JS。當通過Firebug查看我的網站時，未發現問題。我該如何解決它？

Answer 1

提出了一些修改自己的提琴

工作example