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 来实现这一点。CSS3transition属性非常有用：

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

请参阅工作示例。

一点旁注：记住它们已经在 Chrome 和 Firefox 中工作了很长时间，但IE<9 不支持它们。你仍然会得到边框颜色的变化，但没有过渡。

Answer 2

http://jsfiddle.net/c6WcR/

使用 Jquery 用户界面

$("input").focus(function() {
$(this).animate({borderColor: "#ff0000" });
}); 

Answer 3

使用 jQuery，您可以使用方法向您的 html 元素添加一个类addClass并将其淡入。

HTML：

<input class="penguin"></input>

CSS：

.foobar {
    transition:border 1s;
    border: 38px solid #cc0000;
}

JavaScript：

$(".penguin").focus(function() {
  $(this).fadeIn('slow', function(){
    $(this).addClass('foobar');
  });
});

演示：http: //jsfiddle.net/ecj6Q/2/

当输入字段第一次获得焦点时，它会淡入，因为它将类 foobar 添加到任何具有企鹅类的标签中。结果是边框在 1 秒内从 0px 慢慢增加到 38px。

Answer 4

淡入的 CSS 文本效果示例。

HTML：

<div id="penguin">Skipper</div>

CSS：

#penguin {
    height: 90px;
    width: 250px;
    font-size: 3.5em;
    color: blue;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.15) inset; 
}
#penguin:hover {
    text-shadow: green 0 0 5px;
    transition:text-shadow 1s;
}

演示小提琴：http: //jsfiddle.net/Gbuk6/4/

当您将鼠标悬停在 div 上时，文本会淡入并突出显示。当您停止悬停时，它会淡出回到原来的位置。