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功能进行动画处理（例如，宽度，高度或左边可以设置动画，但背景颜色不能，除非使用jQuery.Color（）插件）。除非另有说明，否则属性值被视为多个像素。可以在适用的情况下指定单位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/

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

1 个答案: