Is there a better way of achieving this effect?

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.

The border isn't part of the image by the way. The border is part of the DIV that is enclosing the image. — Andy, Jan 31 '12 at 09:56
see this link [http://stackoverflow.com/questions/813493/jquery-animate-border-color-on-hover][1] [1]: http://stackoverflow.com/questions/813493/jquery-animate-border-color-on-hover — mgraph, Jan 31 '12 at 09:57
create a new class with the darker border and fade to the class. :) — Teun Pronk, Jan 31 '12 at 09:57
Have you had a look whether jQuery UI supports fading the border colour? — Felix Kling, Jan 31 '12 at 09:59

Richard Neil Ilagan · Accepted Answer · 2012-02-02T10:37:18.697

3

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

edited Feb 02 '12 at 10:37

answered Jan 31 '12 at 09:59

Richard Neil Ilagan

14,627
5
48
66

+1 for interesting use of animate, only cause I never thought of that myself :-D – chris Jan 31 '12 at 10:03
I would use .bind instead of .on though so I could trigger the mouseover, mouseout accordingly.. – chris Jan 31 '12 at 10:04
@chris ~ why? `.on` is intended (and recommended by the jQuery team) to be used in lieu of **both** `.bind` and `.delegate`, and is part of the move to deprecate `.live`. Unless I'm mistaken, you **can** trigger off of `.on` hooks. – Richard Neil Ilagan Jan 31 '12 at 10:08
Works nicely. What would be the easiest way of adding a mouseout event to reverse back to the original border color specified in the CSS. – Andy Feb 02 '12 at 10:05

score 1 · Answer 2 · answered Jan 31 '12 at 10:06

There are many ways.

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

score 0 · Answer 3 · answered Jan 31 '12 at 09:59

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

score 0 · Answer 4 · answered Jan 31 '12 at 10:01

0

Can you apply a CSS3 transition on the border color?

answered Jan 31 '12 at 10:01

Raffaele

20,627
6
47
86

Is there a better way of achieving this effect?

4 Answers4

EDIT