animate Fade in border?

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!

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.

CSS:
ul.item li img {
padding:2px;
background-color: #fff;
}

Java:

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