【jQuery】ブリンクするファンクション

画像を読み込んだ後に実行する 画像プリロード参照: http://goo.gl/JhBpl

by tea4two

HTML

<div id="blinker">This will blink</div>

<div id="blinker2">Smooth Blink</div>

<div class="profile" id="blinker3"></div>

JavaScript

//1.Toggleを用いたブリンクファンクションを変数にセット
var blink = function(){
    $('#blinker').toggle();
};

//2. スムースブリンクのファンクション
//ページロード後に3回スムースに輝く
function smBlink(){
    for(i=0;i<3;i++) {
        $("#blinker2, #blinker3").fadeTo('normal', 0.3).fadeTo('normal', 1.0);
    }
}

$(document).ready(function() {
    
    //1
    setInterval(blink, 3500);//3.5秒に1回ブリンクするように設定
    
    //2
    //smBlink(); ちょっとコメントアウトsmBlinkファンクション実行
});

//画像が読み込まれてからsmBlinkを実行する
//画像プリロード参照: http://goo.gl/JhBpl
$('<img id="kitten" />')
.attr('src', 'http://placekitten.com/650/400')
.load(function(){
    $('#blinker3').append( $(this) );
    smBlink();
});