jquery退色邊框不工作

Question

我只是想要一些簡單的鏈接，如果它懸停在上面，而不是突然出現一條線，它應該會褪色。我正在嘗試這個，但無濟於事：

$(document).ready(function(){ 
    $('#footer a').mouseover(function(){ 
    $(this).animate({ 
     border-bottom: 'border-bottom: 1px solid #D8D8D8' 
     }, 1000, function() { 
     // Animation complete. 
    }); 
    }); 
}); 

我該怎麼做？

謝謝。

Answer 1

您這裏需要做一些修改，首先你應該只動畫的顏色，就像這樣：

$(function(){ 
    $('#footer a').mouseover(function(){ 
    $(this).animate({ 
     borderBottomColor: '#D8D8D8' 
     }, 1000, function() { 
     }); 
    }); 
});​ 

另外，給邊境初始大小，以便它不只是「似乎」（更改時0至1像素），這樣的：

​​#footer a { border-bottom: solid 1px transparent; }​ 

You can see a working demo here，使這項工作，你需要或者the color plugin或jQuery UI這樣的顏色可以動畫...核心不處理的顏色，或任何過渡，這不是一個數字。

Here's a more complete demo, probably what you're ultimately after：

$(function(){ 
    $('#footer a').hover(function(){ 
     $(this).animate({ borderBottomColor: '#D8D8D8' }); 
    }, function() { 
     $(this).animate({ borderBottomColor: 'transparent' }); 
    }); 
}); 
​