I have an image thumbnail with a light colored border which, on mouseover, I want to crossfade to a dark colored border. I'm thinking that the easiest way to achieve this would be to fade in a second div with a darker border over the existing one.
Is there a better or different way to fade in a border color change?
Thanks.
Load the jQuery UI into your page. Included with the core package (if I'm not mistaken; you may need to customize your download package) is the ability to use jQuery's .animate() on color values (and/or transitions between two CSS classes). This is something absent from the core jQuery library out-of-the-box.
ReplyDeleteWith that, you can just do something as menial as the following:
// e.g. assuming #foo has default border-color #999999
$('#foo').on('mouseover', function () {
$(this).animate({
borderColor : "#333333"
});
});
Modify according to your interests.
There are many ways.
ReplyDeleteOne is through CSS3 transitions. Although not working in IE, you can have it progressively enhanced to modern browsers.
assuming your div has a class of imageBorder:
div.imageborder {border-color: #FFFFFF;}
div.imageBorder:hover {
border-color: #FF0000;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
The other way is to use javascript, Here is a jQuery sample:
$('div.imageBorder').hover(
function(){
$(this).animate({
border-color: '#FF0000',
},200,function(){});
},
function(){
$(this).animate({
border-color: '#FFFFFF',
},200,function(){});
}
);
This will work in IE as well, but at the cost of loading an extra library.
Put your thumbnail inside a DIV with light colored border (default), later on mouseover find the div and change the style (border-width and border-color), although it is not a fadding style but as user quickly mouseover and mouseout on the image looks like minor fadding effect that is enough i guess. Write your own javascript code to make it faster (jQuery surely gets more time javascript code) .
ReplyDeleteCan you apply a CSS3 transition on the border color?
ReplyDelete