【JavaScript】jQueryとjQuery UIを使ってボタンを点滅させる

「ボタンを目立たせたい」という要望があったときに、背景色を変えるだけでは面白くなかったので、思いついたのが点滅させるやり方。

jQuery UI(1.8以上)を使って簡単に実装

highlightするエフェクトをsetIntervalを使って定期的に実行し続ける。

これを応用すれば揺れ続けたり、マウスオーバーしたときに点滅するとかも簡単に実装できそう。

jQuery UIのeffectのサンプルはデモサイトを参照。

$(function() {
    //button
    $(".blink").button();
    //点滅させる
    setInterval(function(){
        $(".blink").effect("highlight",{},800);
    }, 1000);
  });
</script>
<button class="blink">点滅</button>

デモ画面(demo)

検索すればjQueryプラグインでも似たような機能が見つかると思うので、そっちを使ってもいいかもしれない。

 

<関連記事>

jQueryとjQuery UIの実行しているバージョンを確認