javascript - ボタンの内容をアニメーション化するにはどうすればよいですか？

Question

グーグルに行き、何も入力せずに、「I'mFeelingLucky」ボタンの上にマウスを置きます。それが何をするのか分かりますか？

それを行う方法を考えることはできません...on：hover ....しかし、実際のコンテンツとアニメーション自体はどうですか？

Answer 1

アニメートしているのはボタンではありません。

ボタンの上に隠されたdivがあります。それは絶対に配置されています。すべてのメッセージを含む多くのスパンが含まれています。

ホバーすると、関数を使用してそのdivを移動し、表示します。ボタンの内容が動いているように見えますが、実際には動いていません。

<button></button>
<div style="display: none; font-family: Arial,sans-serif; overflow: hidden; text-align: center; z-index: 50; height: 27px; position: absolute; left: 667px; margin: 0px; top: 45px; width: 114px;>
  <div style="left: 0px; position: absolute; right: 0px; white-space: nowrap; top: -29px;">
    <!-- spans go here -->
  </div>
</div>

値-29pxを参照してください？変化しているのはそれだけです。

Answer 2

境界線と太字のクラス、つまりフォーカスを追加し、jQueryで切り替えます。

$('#button').hover( function () {
  $(this).addClass('focus');
}, function () {     
  $(this).removeClass('focus');
} );

GoogleがChromeで使用していることがわかる実際のルールは次のとおりです。

.gbqfba-hvr:focus,.gbqfbb-hvr:focus{
  -webkit-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);
  -moz-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);
  box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1)
}
.gbqfb-hvr,.gbqfba-hvr,.gbqfbb-hvr{
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,.1);
  box-shadow:0 1px 1px rgba(0,0,0,.1)
}