...

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.

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'});
});



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum