如何用jQuery动画显示点击链接的边框？

Question

我是jQuery的新手。我一直在试图弄清楚动画功能，但它仍然不起作用。

我想要做的事情非常简单。这里有一个链接。如果我点击它，我应该会看到它周围的边框。但它不起作用。以下是我的代码

<a href="#">Click me</a>

$(document).ready(function(){
    $('a').on('click', function(){
        $(this).animate({
            border-width: '2px'
            }, 1000, function(){
                alert('It has worked');
        });
    });
});

Answer 1

仅为数值属性设置动画效果。您无法设置边框颜色和样式的动画效果。

摘自jQuery网站：

除非使用jQuery.Color()插件，否则应将所有动画属性设置为单个数值；大多数非数值属性不能使用基本的jQuery功能设置动画(例如，可以设置宽度、高度或左侧的动画，但不能设置背景色的动画)。除非另有指定，否则属性值将被视为像素数。可以在适用的情况下指定单位em和%。

jQuery animate API page

我建议你做的是只动画的border-width和设置其他属性的CSS文件。

JS

$(document).ready(function(){
    $('a').on('click', function(){
        $(this).animate({
            'border-width': '2px'
            }, 1000, function(){
                alert('It has worked');
        });
    });
});

CSS

a{
    border : 0 solid red;
}

小提琴：http://jsfiddle.net/YQXr8/