0

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?

Community
  • 1
  • 1
dukevin
  • 22,384
  • 36
  • 82
  • 111

2 Answers2

2

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.

Veger
  • 37,240
  • 11
  • 105
  • 116
  • would I change borderColor? and would it be possible to do borderColor:rgba(x,x,x,0)? – dukevin Jun 21 '12 at 10:48
  • Check http://stackoverflow.com/questions/813493/jquery-animate-border-color-on-hover for more information on animating the border color. – Veger Jun 21 '12 at 10:51
  • 1
    @KevinDuke I just tested it and it does not. You could manually create your own though with the step function theoretically. – Joseph Marikle Jun 21 '12 at 11:00
  • Indeed, according to the question I provided you need to use `borderTopColor` (and the other 3) for animation. One of the answers suggest using a plugin which does this for you. – Veger Jun 21 '12 at 11:08
  • borderTopColor doesn't work, and according to http://www.bitstorm.org/jquery/color-animation/ it's a bug in jquery – dukevin Jun 21 '12 at 11:14
  • Well use that plugin that fixes the bug :) – Veger Jun 21 '12 at 11:15
1

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

Pablo Martinez
  • 2,172
  • 1
  • 23
  • 27