1

我是 jQuery 的新手。我一直在尝试找出动画功能，但它仍然无法正常工作。

我想做的很简单。有这个链接。如果我点击它，我应该会看到它周围的边框。但它不起作用。这是我的代码

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

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

1 回答 1

4

仅对数值属性进行动画处理。您不能为边框颜色和样式设置动画。

取自 jQuery 网站：

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

jQuery 动画 API 页面

我建议您只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/

于 2013-07-12T16:05:35.767 回答