3

フォーカスのある要素の境界線の色をグレーから赤にフェードインしたい。

すぐに色を変えるのは簡単ですが、ゆっくりフェードインさせたいです。

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

4 に答える 4

6

これを実現するために JavaScript を使用する必要はありません。CSS3transitionプロパティは非常に便利です。

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

作業例を参照してください。

ちょっとした補足: Chrome と Firefox で長い間機能してきましたが、IE<9 ではサポートされないことに注意してください。境界線の色は変更されますが、トランジションはありません。

于 2013-08-04T17:47:20.590 に答える
0

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 にカーソルを合わせると、テキストがフェードインしてフレアアウトします。ホバリングを停止すると、フェードアウトして元の場所に戻ります。

于 2014-02-13T04:55:11.867 に答える
0

http://jsfiddle.net/c6WcR/

Jquery UI の使用

$("input").focus(function() {
$(this).animate({borderColor: "#ff0000" });
});
于 2013-08-04T18:09:15.330 に答える