読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

Webデザイン、プログラミングの勉強ブログ。

【javascript】タイマー処理を使った画像のフェイドイン・アウト


slide

html

<p><img src="img/img1.jpg" alt="photo" id="img"></p>
<ul>
<li id="f_out">
フェードアウト
</li>
<li id="org">
元の画像
</li>
<li id="f_in">
フェードイン
</li>
</ul>
</html>

javascript

var f_out = document.getElementById('f_out');
var f_in = document.getElementById('f_in');
var img = document.getElementById('img');
var org = document.getElementById('org');
var opacity = 1;
var timer_id = null;
var timer_id2 = null;

function click_f_out(){
    if (opacity > 0){
    opacity -= 0.1
    img.style.opacity = opacity;
    timer_id = setTimeout(click_f_out,50);
    }else{
    clearTimeout(timer_id);
    timer_id = null;
    }
}

function click_f_in(){
    if (opacity < 1){
    opacity += 0.1;
    img.style.opacity = opacity;
    timer_id2 = setTimeout(click_f_in,50);
    }else{
    clearTimeout(timer_id2);
    timer_id2 = null;
    }
}

function click_org(){
    clearTimeout(timer_id);
    opacity = 1;
    img.style.opacity = opacity;
    timer_id = null;
}

function timer_set(){
    if(timer_id === null){
    click_f_out();
    }
}

function timer_set2(){
    if(timer_id2 === null){
    click_f_in();
    }
}

f_out.addEventListener('click',timer_set,false)
f_in.addEventListener('click',timer_set2,false)
org.addEventListener('click',click_org,false)

タイマー処理が2つ書かれていた場合

一つ目のタイマー処理は一回実行され、次のタイマー処理で読み込み(?)が繰り返される。

var i = 0;
var f = null;
function count(){
console.log('b');
f = setTimeout(count,500);
}
function count(){
console.log(i++);
f = setTimeout(count,500);
}