Question

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.

Answer 1

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.

With 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.

EDIT

The easiest way to implement this would be to leverage CSS itself, and just use jQuery to toggle between CSS rules.

#foo { border-color:#999; }
#foo.hovering { border-color:#333; }

Then you can just transition using jQuery UI’s extended jQuery functions:

$('#foo').hover(
    function () {
        // this is on mouseover
        $(this).addClass('hovering', 'fast');
    },
    function () {
        // this is on mouseout
        $(this).removeClass('hovering', 'fast');
    }
);