Question

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

I’m trying to create a “simple” canvas version of my jQuery example. When the container is hovered over, the absolutely positioned circle’s border expands from 2px to 6px. I’ve seen that Canvas is a lot smoother, and it works in ie9, whereas css3 transitions don’t work until ie10 (caniuse.com). Can anyone point me in the right direction? or lead me to a somewhat simple example that I could try to discect? or just give me any kind of help in creating something like this? ANY help is greatly appreciated.

I’ve looked into using Raphael to make it all nice and smooth when animating, but that’s a ton of weight for such a small effect.

Jquery has some problems animating, and my example lookes a little pixelated. I’m not trying to necessarily fix my example(unless it did all the animations at once, instead of what it’s doing right now, and it didn’t look so bad), Canvas looks like it does nice round circles and the animation just seems so much smoother. I’m also trying to produce an elastic effect when the border grows, but not when it shrinks(if possible). I don’t know how hard this is to do with Canvas or if another way would be suggested. Thank you SO much.

Answer 1

Two things. First jQuery does not fully support animating shorthand values. So when you animate your “borderWidth”, it needs to animate 4 sides individually (Source).

Shorthand CSS properties (e.g. margin, background, border) are not
supported. For example, if you want to retrieve the rendered margin,
use: $(elem).css(‘marginTop’) and $(elem).css(‘marginRight’), and so
on.

Second, I’d use the margin over the position of the element.

By the way, check out my old question for another solution to a rounded element that has a border animation, maybe that suits what you need more (since you need not draw the circle). And there’s a more detailed explanation there.

Check out your update fiddle for the right effect.

Good luck.