CODEWITHSUNDEEP
jqueryjquery-animate
dukevin
dukevin

Reputation: 23178

jquery .animate() not animating

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?

Upvotes: 0

Views: 342

Answers (2)

Pablo Martinez
Pablo Martinez

Reputation: 2182

it is because the border only animates the width of the border 1 by 1.

if you put a border-width of 10px it animates: http://jsbin.com/utiwoy/3

Upvotes: 1

Veger
Veger

Reputation: 37906

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.

Upvotes: 2

Related Questions