I’m trying to make a border fade in around an element.
Following the answer on: jquery animate .css, I used the .animate() jquery function and followed the tutorial on the jquery site.
However, I cannot get it to work. Here is my code on jsbin:
http://jsbin.com/epojaw/2
Hovering on the text should fade in the border around it, but instead, it just appears suddenly.
Why is this?
You are using a fade in effect by changing the width of the border from 0px to 1px. I assume the step size is 1px, so yes it appears immediately.
Instead you could try to create a fade in using the border color, eg from white to red. Then jQuery is able to have more steps and your effect works better.