jQuery and CSS3

[Fmdpa]

I am trying to create an animation with jQuery that basically would show to div (#contact) and I would use the animate function to add a CSS3 property...

$(#contact).animate({border-radius:7}, 1000);

I test it in a CSS3 supporting browser, but to no avail. Any suggestions?

[Synook]

"#contact" and "border-radius" probably needs quotation marks around it. They are still strings, remember.

[Fmdpa]

Sorry, I missed the quotes in the sample code. But my original page did have quotes, and it still didn't work.

[MrFish]

Are you sure it's possible to animate a border radius? It's not even supported by all browsers and the ones that do usually have their own version of it. ( -moz- -webkit- -op- )

[Synook]

After a bit of fiddling, I found you have to (a) use lowerCamelCase notation and ( specify each corner individually.

var r = 7;$("#contact").animate({	"borderTopLeftRadius" : r,	"borderTopRightRadius" : r,	"borderBottomLeftRadius" : r,	"borderBottomRightRadius" : r,}, 1000);

P.S. MrFish, jQuery can animate any numeric CSS property.

[Fmdpa]

Thanks, Synook!

[Fmdpa]

It works great with CSS3 browsers, but in semi-CSS3 browsers, it doesn't work. How would I add the browser prefixes to the jQuery animation parameters so it would work in moz and webkit browsers?

[ApocalypeX]

Does jQuery allow hyphens? - try borderRadius.