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

Urb*_*coz 7 html jquery glow jquery-effects

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

<button id="btnSubmit" style="float:left;width:78px;">Submit</button>
Run Code Online (Sandbox Code Playgroud)

理想情况下,我希望按钮"发光".即在它周围有一个渐隐的边框,然后在一秒后消失.

我尝试过使用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;
}
Run Code Online (Sandbox Code Playgroud)

但我无法弄清楚如何让它淡入淡出.此外,它似乎在IE8中不起作用.

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

Cob*_*oby 7

DEMO - 使用CSS3框阴影和动画(使用-moz-webkit供应商前缀)的外部发光.


xda*_*azz 6

$('button').effect( "highlight", {color: 'red'}, 3000 );
Run Code Online (Sandbox Code Playgroud)

演示.