Question

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

<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通常很适合这种效果，但到目前为止我还没有遇到任何合适的效果。

Answer 1

DEMO - 使用CSS3框阴影和动画（使用-moz和-webkit供应商前缀）进行外部发光。

Answer 2

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

The demo.

Answer 3

在500ms的线性过渡中，将向按钮添加 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上的实时演示

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

3 个答案: