appendChildを何処で書こうと、関数始めで動く物なのでしょうか??
javascript初心者です。
色々実験しているのですが、今理解に苦しむ状況に陥っています。
まず、要素がゆっくり下に動いた後、下の要素の子になる事を意図して書いた下のコードを見て下さい。
//スライドアクションelementをoffsetだけ1pxずつinterval毎に動かす。
function slideDownCloser(element, offset, interval){
element.style.position = "abusolute";//relativeにしても問題は同じ
var pos = element.offsetTop;
function goDown() {
element.style.top = pos + "px";
pos += 1;
if(offset>pos) {
setInterval(goDown, interval);
}
else {
element.style.position = "static";
}
}
return goDown;
}
このクロージャが返した関数を呼び出した直後にelementをappendChildで別の要素内に移そうとしても、どうやらelementが移動先の親要素を基準にして動いてしまいます。
例えば、簡単に書くとこのような関数を書いてもshitaElから100px動いてしまいます。。
function addElement(event) {
var shitaEl = getElementById("shita");
var slideDown = slideDownCloser(event.target, 100, 30);
slideDown();
shitaEl.appendChild(event.target);
}
なを、この現象はMac版のsafariとfirefoxで確認しました。。また、event.targetプロパティがIEでは読み込めないので、IEでは動かないと思います。
No.1ベストアンサー
- 回答日時:
とりあえずsetInterval は setTimeoutの間違い?
クロージャ云々は関係なくてsetTime~の動作を考えてみるといいかと。
(タイマー設定の関数はwaitがかかるわけではなくてタイマーハンドラを登録するだけです)
goDown内でsetTimeoutが実行された後、goDown、slideDown関数は終了。
即、addElementの次のステップ(appendChild)が実行されます。
タイマー契機で2回目以降のgoDown実行時、elementは既にshitaの子要素になってます。
offset>pos が偽になったタイミングでaddElementが実行されるような仕組みに組み替えるしかないですね。
今読むと良く理解出来ない質問文にも関わらず。回答ありがとうございます。
setIntervalはsetTimeoutのつもりで使っていましたが、動作が違うようですね。。
なるほど、そのような仕組みですか。。ちょっと組み替えてみます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(プログラミング・Web制作) pythonでのカーソル移動がずれる 2 2023/07/30 08:51
- C言語・C++・C# c言語の問題です 3 2023/01/10 16:15
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript Google reCAPTCHAについて 1 2023/02/22 14:37
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- 英語 「第1および第2の要素」の英語 4 2022/03/24 09:55
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- その他(プログラミング・Web制作) google formsを使ったタスク依頼フォーム作成におけるご相談 1 2023/06/22 15:55
- JavaScript JavaScriptの即時関数の書き方 1 2022/11/29 09:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JSPの処理の途中で、JavaScript...
-
innerHTMLなどの反映タイミング
-
リクエスト結果が一瞬しか表示...
-
VBA SORT Applyでエラー
-
〔Excel:VBA〕マクロの実行が異...
-
javascriptで最初のところに戻...
-
ラベルの色がかわってくれない
-
VBA ステータスバー DoEvents
-
C#でボタン名を変更しても動く
-
PowerPointで時計表示
-
resizeToメソッドが動作しません
-
以下のコードを実行しても、オ...
-
デザイン時のVisible=Falseは実...
-
onload onunload onbeforeunloa...
-
if(1){...}とはどういうことで...
-
GoTo文とかSelect文の処理の仕...
-
VB.NET2003 テキストボックスに...
-
VBAによる第3、4水準文字の判定...
-
正整数の半角数字かどうか判定する
-
jsファイルを閲覧者がダウンロ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JSPの処理の途中で、JavaScript...
-
if(1){...}とはどういうことで...
-
デザイン時のVisible=Falseは実...
-
1つのVBAコードをすべてのコア...
-
PowerPointで時計表示
-
jQuery ui Datepicker 明日以降...
-
VBA SORT Applyでエラー
-
VBA ステータスバー DoEvents
-
〔Excel:VBA〕マクロの実行が異...
-
リクエスト結果が一瞬しか表示...
-
C#でボタン名を変更しても動く
-
ラベルの色がかわってくれない
-
CreateFile、CloseHandleの繰り...
-
JavaScriptでショートカットキ...
-
既存のwebサイトで、ローカルの...
-
初心者です。gulpでコンパイル...
-
javascriptで最初のところに戻...
-
VBAの[cellsメソッドは失敗しま...
-
Excel VBA にて JavaScript の...
-
VB.netの重複データ数カウント...
おすすめ情報