要素を点滅させるjavascript & jQuery

一般的なWebサイトでは、文字や要素を点滅させると目につきやすい反面、気が散ってしまいページを見るのに邪魔になってしまいます。

しかし業務システムや社内サイトなどでは、文字や要素を点滅させてアラート代わりにしたりすることが割とあります。

それなりに需要がある点滅ですが、javascriptやjQueryでは点滅させるための関数が用意されていないため自作する必要があります。

今回は、この点滅用の関数をjavascriptとjQueryで作成したので紹介します。

要素を点滅させるjavascript & jQuery
  1. ON/OFFボタンで切り替えができるjavascriptの点滅処理
  2. jQueryで作成した点滅処理

ON/OFFボタンで切り替えができる点滅処理

javascriptを使いON / OFFボタンで点滅を制御するスクリプト。

HTMLソースのdivタグは点滅時に要素が消え、下の要素が上下に移動するのを阻止するためです。CSSで指定する「visibility: hidden;」は要素の高さを保ったまま見えなくするはずなのですが、一部ブラウザでは要素ごと消してしまう現象があったためdivタグで縦幅を維持しています。

HTML
<input type="button" onclick="switch_js_on()" value="on" />
<input type="button" onclick="switch_js_off()" value="off" />
<div style="height:30px;">
     <span id="switch_jq" class="switch-on">switch</span>
</div>

CSS
.switch-on{
    display: inline-block;
    height:30px;
    color: red;
    font-size:30px;
    font-weight: bold;
    visibility: visible;
}
.switch-off{
    display: inline-block;
    height:30px;
    visibility: hidden;
}
javascript
// 点滅用クラス
function func_switch_js(){
    // on・off用フラグ
    var outer_switch = "off";
    var set_switch_flg = function(value){
        outer_switch = value;
    }
    this.set_switch_flg = set_switch_flg;
    var get_switch_flg = function(){
        return outer_switch;
    }
    this.get_switch_flg = get_switch_flg;
    
    // タイマーID
    var timerID = null;
    // switch関数
    var switching = function(id){
        // IDをチェック
        var ele = document.getElementById(id);
        if(ele == null) return;
        if(ele == "undefined") return;
        // 点滅解除
        if(outer_switch == "off") {
            if(timerID != null){
                // タイマーIDがあればクリアする
                clearTimeout(timerID);   
            }
            
            ele.className = "switch-on"
            return; // 処理を抜ける
        }
        
        // cssのクラス名取得
        var css = ele.className
        if(css == "switch-on"){
            // onの場合はoffに
            ele.className = "switch-off"
        }
        else{
            // offの場合はonに
            ele.className = "switch-on"
        }
        // 0.5秒後にswitchingを再実行
        timerID = setTimeout(function(elemId){
            switching(elemId);
        }, 500, id);
    }
    this.switching = switching;
}

// 点滅用クラスのインスタンス化
var switch_js = new func_switch_js();

// onボタン押下のイベント
function switch_js_on(){
    // 2重起動禁止
    if(switch_js.get_switch_flg() == "on") return;
    // 関数実行
    switch_js.set_switch_flg("on");
    switch_js.switching("switch_js");
}
// offボタン押下のイベント
function switch_js_off(){
    switch_js.set_switch_flg("off");
}

 

switch

jQueryで作成した点滅処理

点滅処理をjQueryで記載するとより短く書け、さらにアニメーションを付けることもできます。

ON/OFFの切り替え処理自体は対して短くならないため割愛して、点滅部分のみでサンプルを作成してみました。

CSSはjavasciptの処理で使用した定義を使用します。

HTML
<div style="height:30px;">
     <span id="switch_jq" class="switch-on">switch</span>
</div>
jQuery
// 点滅用クラス
function func_switch_jq(id){
    // IDをチェック
    var $ele = $(id);
    if($ele.length == 0) return;

    $ele.fadeToggle("fast");

    // 0.5秒後にfunc_switch_jqを再実行
    setTimeout(function(elemId){
        func_switch_jq(elemId);
    }, 500, id);
}
 
$(function(){ 
    func_switch_jq("#switch_jq");
});
switch

このほかにも、animate関数を使用して点滅に動きをつけることもできます。

サンプルでは単調な動きですが、animation関数では色や動作パターンも指定できるため変わった点滅の動作にすることもできます。

HTML
<div style="height:30px;">
     <span id="switch_jq_ani" class="switch-on">switch</span>
</div>
jQuery
// 点滅用クラス
function func_switch_jq_ani(id){
    // IDをチェック
    var $ele = $(id);
    if($ele.length == 0) return;
    // 1秒間隔で透明度を切り替え
    $ele.animate( { opacity: 'toggle',}, { duration: 1000, easing: 'linear', } )

    // 0.5秒後にfunc_switch_jq_aniを再実行
    setTimeout(function(elemId){
        func_switch_jq_ani(elemId);
    }, 500, id);
}
 
$(function(){ 
    func_switch_jq_ani("#switch_jq_ani");
});
switch
divider

Trackback URL

http://webnonotes.com/javascript-2/javascript-switch/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>