如何使用 jQuery 突出显示按钮？答案

【问题标题】：How can I highlight a button with jQuery?如何使用 jQuery 突出显示按钮？
【发布时间】：2012-09-16 01:48:42
【问题描述】：

我需要在使用我的页面时将用户的注意力吸引到某个按钮上。

<button id="btnSubmit" style="float:left;width:78px;">Submit</button>

理想情况下，我希望按钮“发光”。即在它周围有一个淡入的边框，然后在一秒钟后淡出。

我尝试使用 box-shadow 来实现我想要的发光效果。

.boxShadowed{
     font-weight:bold;
    -moz-box-shadow:0px 0px 10px 7px #777777;
    -webkit-box-shadow:0px 0px 10px 7px #777777;
    box-shadow:0px 0px 10px 7px #777777;
}

但我不知道如何让它淡入淡出。此外，它似乎在 IE8 中不起作用。

我知道 jQuery 通常非常适合这种效果，但到目前为止我还没有遇到任何合适的。

【问题讨论】：

请展示一些您尝试过的代码或到目前为止的代码。
jqueryui.com/demos/show/default.html 只需包含脚本，并选择高亮效果。
根据您所寻找的复杂程度，outline css 命令提供了一个低级替代多行 jQuery 的方法。

标签： jquery html jquery-effects glow

【解决方案1】：

DEMO — 使用 CSS3 盒子阴影和动画的外发光（使用 -moz 和 -webkit 供应商前缀）。

【讨论】：

【解决方案2】：

$('button').effect( "highlight", {color: 'red'}, 3000 );

The demo.

【讨论】：

这对我来说当然是一个选择。但我真的很想让边框也淡入淡出。

【解决方案3】：

在线性转换的 500 毫秒内，一个类 highlightButton（添加样式）将被添加到按钮中。以同样的方式，该类将再次被删除。

一定要包含 jQuery 和 jQueryUI

更多关于 addClass 和 removeClass 的信息可以在这里找到：
https://api.jquery.com/addclass/
https://api.jquery.com/removeclass/

Javascript：

$("#btnTest").addClass( "highlightButton", 500, "linear" ).removeClass("highlightButton",500,"linear");

CSS：

.highlightButton {
  border-color: red;
  color: red;
  font-weight: bold;
}

HTML：

<button type="button" class="btn btn-default" id="btnTest">test</button>

Fiddle上的现场演示

【讨论】：