如何在画布中制作一个圆圈，当它的容器悬停时，圆圈的边框会增长几个px，或者建议？

Question

http://jsfiddle.net/nicktheandroid/BcaW3/1/

我正在尝试为我的 jQuery 示例创建一个“简单”的画布版本。当容器悬停在上面时，绝对定位的圆的边框从 2px 扩大到 6px。我已经看到 Canvas 更加流畅，并且在 ie9 中有效，而 css3 过渡直到 ie10 (caniuse.com) 才有效。谁能指出我正确的方向？或者引导我举一个我可以尝试发现的简单示例？或者只是给我任何帮助来创建这样的东西？非常感谢任何帮助。

我已经研究过使用 Raphael 在制作动画时让它变得既漂亮又流畅，但对于这样一个小效果来说，这实在是太重了。

Jquery 在动画方面存在一些问题，我的示例看起来有点像素化。我并不一定要修复我的示例（除非它一次完成所有动画，而不是它现在正在做的事情，而且看起来并不那么糟糕），Canvas 看起来它做了很好的圆形和动画只是看起来顺畅多了。我也试图在边界增长时产生弹性效果，但在边界收缩时（如果可能）不会。我不知道这对 Canvas 有多难，或者是否会建议另一种方式。非常感谢。

Answer 1

两件事。首先 jQuery 不完全支持动画速记值。因此，当您为“borderWidth”设置动画时，它需要分别为 4 个边设置动画(Source)。

简写 CSS 属性（例如边距、背景、边框）不是 支持的。例如，如果要检索渲染的边距， 使用：$(elem).css('marginTop') 和 $(elem).css('marginRight')，等等 开。

其次，我会在元素的position 上使用margin。

顺便说一句，请查看我的old question 以获得具有边框动画的圆形元素的另一种解决方案，也许这更适合您的需要（因为您不需要绘制圆圈）。那里有更详细的解释。

查看您的update fiddle 以获得正确的效果。

祝你好运。