How to fade in a specific CSS property

border, css, fadein, html, javascript

Solution

You don't need to use JavaScript to achieve this. The CSS3 `transition` property is very useful:

input {
    border: 3px solid #ccc;
    transition:border 1s;
}
input:focus {
    border: 3px solid #cc0000;
}

See working example.

A little side note: bear in mind they've worked for a long time in Chrome and Firefox, but IE<9 won't support them. You'll still get a change in border color, but no transition.

Problem

I want to fade in a border color from grey to red on an element on focus. Getting the color to change immediately is easy, but I want it to fade in slowly. HTML ``` <input class="timeBlock destination hours" type="text" name="desHours" value="00" maxlength="2"> ``` CSS ``` input.timeBlock { height: 90px; width: 90px; text-align: center; font-size: 3.5em; border-radius: 10px; color: #444; border: 3px solid #ccc; box-shadow: 0px 0px 10px rgba(0,0,0,0.15) inset; position: absolute; top:0; bottom: 0; margin: auto; } input.focus { border: 3px solid #cc0000; } ``` JS ``` $("input").focus(function() { $(this).fadeIn('slow', function(){ $(this).addClass('focus'); }); }); ```

Original source