7

ページを使用しているときに、ある時点でボタンにユーザーの注意を引く必要があります。

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

理想的には、ボタンを「光らせる」ようにします。つまり、フェードインし、1秒後にフェードアウトする境界線をその周りに配置します。

ボックスシャドウを使用して、必要なグロー効果を実現してみました。

.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は通常、この種の効果に最適であることは知っていますが、これまでのところ、適切なものは見つかりませんでした。

4

3 に答える 3

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

デモ。

于 2012-09-24T15:12:33.800 に答える
7

デモ— CSS3ボックスシャドウとアニメーションを使用した外部グロー（-mozベンダー-webkitプレフィックスを使用）。

于 2012-09-24T15:32:02.330 に答える
0

線形遷移を伴う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のライブデモ

于 2018-06-22T15:44:38.837 に答える