1

Jquery を使用してテキスト ボックス フィールドの境界線を強調表示し、滑らかな効果を実現します。例えば。ユーザーが入力ボックスにフォーカスすると、フィールドの境界が滑らかな効果で強調表示されます。css の focus プロパティを使用して実行できることはわかっていますが、スムーズな効果が得られないため、使用したくありません。

例: 1. youtube の検索ボックス : http://www.youtube.com/ 2. 99lime : http://www.99lime.com/elements/#form-example

4

4 に答える 4

2

CSS トランジションで効果をスムーズにすることができます。

input {
    -webkit-transition: box-shadow .3s;
    transition: box-shadow .3s;
}
input:focus {
    box-shadow: 0px 0px 7px blue;
}

http://jsfiddle.net/ExplosionPIlls/Zn8eZ/

jQuery で box-shadow をアニメーション化する簡単な方法はありません。プラグインが必要です。目に見えない影の存在の上に入力を重ねて、その表示をアニメーション化できると思います。

于 2013-04-10T05:11:06.293 に答える
0

あなたはこのようにすることができます

  $('input[type="text"]').focus(function() {
   $(this).addClass("focus");
  });

   $('input[type="text"]').blur(function() {
   $(this).removeClass("focus");
  });

ここでデモを確認してください... http://jsfiddle.net/d3TbF/

于 2013-04-10T05:14:43.313 に答える