View Full Version : animate Fade in border?

The Chef
10-03-2011, 04:28 AM
So I'm trying to modify this code to make it so a 1px border fades in on rollover of an image.

My CSS for the images has this class for an invisible border:

border: solid 1px rgba(242, 112, 17, .0);

I was assuming using this part of the Javascript code below that I could animate some kind of borderOpacity or something like that so the border would fade in from .0 to 1.

$('.item li img').animate({'opacity' : 1}).hover(function() {
$(this).animate({'borderOpacity' : 1});
}, function() {
$(this).animate({'opacity' : 1});

But I obviously am doing something wrong.

Any help would be greatly appreciated. Thanks!

The Chef
10-03-2011, 06:31 AM
Figured it out. :)
Had to add a Jquery "jquery.color.js" to the header. Then it was just a matter of changing borderColor to backgroundColor.


ul.item li img {
background-color: #fff;


$('.item li img').animate({'opacity' : 1}).hover(function() {
$(this).animate({'backgroundColor' : '#F27011'});
}, function() {
$(this).animate({'backgroundColor' : '#fff'});