javascript - 如何淡入特定的 CSS 属性

Question

我想在焦点元素上将边框颜色从灰色淡化为红色。

立即改变颜色很容易，但我希望它慢慢淡入。

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

Answer 1

您无需使用 JavaScript 即可实现此目的。 CSS3 transition 属性非常有用:

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

See working example .

一点旁注:请记住，它们已经在 Chrome 和 Firefox 中工作了很长时间，但是 IE<9 won't support them .您仍然会看到边框颜色发生变化，但没有过渡。