jquery褪色边框不起作用

时间:2010-06-21 23:35:52

标签: javascript jquery

我只想要一些简单的链接,如果它悬停在上面,而不是突然出现在它下面,它应该会消失。我正在尝试这个,但无济于事:

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

我该怎么办?

感谢。

1 个答案:

答案 0 :(得分:5)

您需要在此处进行一些更改,首先您应该仅为颜色设置动画,如下所示:

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