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

jquery褪色边框不起作用

1 个答案: