1

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

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

以上适用于 jQuery v1.7.1。

我想让相同的代码与 jQuery v1.9.1 一起工作。

有人可以让我知道我必须进行哪些更改才能使其与 jQuery v1.9.1 一起使用。

任何帮助将不胜感激。

4

1 回答 1

3

假设我们有一个span要显示为块元素的集合：

<span></span>

span { display:block; }

CSS 中的圆圈可以使用该border-radius属性轻松制作。

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

这将创建一个完美的 100 像素半径蓝色 (#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 示例。

第二个 JSFiddle 示例使用单独的半径位置，而不仅仅是border-radius.

第三个 JSFiddle 示例使用 jQuery UI更改borderColor元素（根据评论）。

于 2013-05-02T09:19:21.767 回答