與jQuery

Question

我試圖做懸停動畫，但沒有成功鏈接，此強調動畫是我的代碼：

HTML

<ul> 
    <li> 
     <a class="border" href="#">HOME</a> 
    </li> 
    <li> 
     <a class="border" href="#">TOUR</a> 
    </li> 
    <li> 
     <a class="border" href="#">CONTACTUS</a> 
    </li> 
</ul> 

SCRIPT

$(document).ready(function() { 
    $(".border").hover(function() { 
     $(this).animate({ 
      borderBottom: '2px solid #3399FF', 
      width: '46%' 
     }, 500); 
    }); 
}); 

FIDDLE

我知道它看起來很糟糕，但請幫忙！

我很感謝您的考慮。

Answer 1

您還沒有包括jQuery庫... http://jsfiddle.net/2GJrW/4/

$(document).ready(function() { 
    $(".border").hover(function() { 
     $(this).animate({ 
      borderBottom: '2px solid #3399FF', 
      width : '46%' 
     }, 500); 
    }); 
}); 

Answer 2

它的工作原理，看看有沒有被加載jQuery的。

現在參見：

$(document).ready(function(){ 

     $(".border").hover(function(){ 
      $(this).animate({ 

       borderBottom :'2px solid #3399FF', 
       width:'46%' 


      }, 500); 
     }); 





    });