如何创建一个圆圈并在该圆圈上悬停它应该变得更大

Question

我想要创建一个圆圈，并且在该圆圈的悬停时它应该变得更大。

以下是示例：http://www.ivanbayross.com/jquery_effect1/。

以上的工作与jQuery v1.7.1完美配合。

我想使用jQuery v1.9.1制作相同的代码。

有人可以让我知道我必须做些什么更改才能使它与jQuery v1.9.1一起使用。

任何帮助将不胜感激。

Answer 1

让我们假设我们设置span作为块元素显示：

<span></span>

span { display:block; }

使用border-radius属性可以轻松完成CSS中的圆圈。

span {
    border-radius:100px;
    border:100px solid #5ae;
    width:0;
    height:0;
}

这将创建一个完美的100px半径蓝色（＃5ae）圆。

要在悬停（mouseover）时将其设置得更大，我们只需要使用jQuery的animate()方法。将border-radius和border-width增加到所需的大小：

$('span').on('mouseover', function() {
    $(this).stop().animate({
        'border-width': 200,
        'border-radius': 200
    }, 500);
});

要在mouseout上减少此项，我们只需还原更改：

$('span').on('mouseout', function() {
    $(this).stop().animate({
        'border-width': 100,
        'border-radius': 100
    }, 500);
});

JSFiddle example

Second JSFiddle example使用单个半径位置而不仅仅是border-radius。

Third JSFiddle example使用jQuery UI更改元素的borderColor（根据评论）。