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

问题描述 投票:1回答: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');
        });
    });
});
jquery jquery-animate
1个回答
4
投票

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

摘自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/

© www.soinside.com 2019 - 2024. All rights reserved.