2008年12月11日木曜日

setTimeoutで引数が入った関数を呼ぶ

たぶん常識なんですかね?
ものすごく詰まったので、記載。

setTimeOutで10秒後にホゲホゲを繰り返すみたいなことをやりたくて、
単純に

var str = "文字列"
setTimeOut("hogehoge(" + str + ")",100);

でやっていたところエラーでつまりました。

俺としては
hogehoge(文字列)
をやってるつもりだったのだけれど、

実際には
hogehoge([HTMLDivElement])
が実行されていて、できませんよと。

setTimeoutで呼び出した場合、
オブジェクトとして扱われるのでホゲホゲなんで、
なんだか難しい説明がありましたが動いたから良しとした。

setTimeOut("hogehoge('" + str + "')",100);


のように変数をシングルで囲ってあげなさいと言われました。

参考
JavaScriptのsetInterval()に引数ありの関数を渡す場合

文字のフェードイン・フェードアウト

2008年12月8日月曜日

初めてのjquery.js

おそらく一番使う使い方だけど、
まったく理解していないからわからなかったので、記載。

idの指定は$("#id_name")、クラスの指定は$(".class_name")
cssみたいで私たち半端ものには親しみやすい感じ。


jqueryで指定のdivの子要素にあたるclassの取得
$("#targetID").children(".targetClass");

これで取得したクラスのstyleを操作するには
$("#targetID").children(".targetClass").css("display", "block");


あーわかりやすすぎて、全然わかんなかった。


すばらしいリファレンス
jQuery日本語リファレンス

2008年12月2日火曜日

javascriptでのdivのスライド

無駄にはまった、書いておく。

setTimeoutを使ってのdivのスライド。

setTimeoutでのstyleのtopに数を加算していく場合、
以下では動かない。

×直では動かない。
document.getElementById('target').style.top += move_num + "px";


○変数で加算していって、styleに代入。
move_num += 5;
document.getElementById('target').style.top = move_num + "px";


60px上に移動する場合の例)
function slide_up() {
move_num -= 5;
hr.style.top = move_num + "px";

if((60 +
move_num) <= 0) {
document.getElementById('target').style.top = -60 + "px";
clearTimeout(timer);
return;
}else{
var timer = setTimeout("slide_up()",0);
}
}

clearTimeoutでキャンセルすることを忘れるな。