javascript - 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 变为 1px 时)，如下所示:

​​#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' });
    });
});
​