javascript - 如何为按钮的内容设置动画？

Question

转到谷歌，无需输入任何内容，将鼠标悬停在“手气不错”按钮上。看看它有什么作用？

我想不出该怎么做……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

为边框和粗体添加一个类，即：focus，并使用 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)
}