フェードインさせたい
- 質問：最初にonloadで呼び出された関数の中にClearTImeaout（１１行目）にありますがそこでこの関数はとまってしまわないのでしょうか？
- 質問：また二つSettimeaoutがありますが二つとも識別する単語がtimer1で同じですけどごっちゃにならないのでしょうか？
- 解答：関数内にあるClearTImeaoutは、タイマーをクリアするためのものであり、関数を止めることはありません。実際には関数の中でタイマーをクリアしても、関数自体は続行されます。また、二つのSettimeaoutは同じタイマー名timer1を使用していますが、異なるスコープ内に存在するため、ごちゃ混ぜにはなりません。それぞれのタイマーは独立して動作します。
- ベストアンサー
set TImeout
<html> <head> <title>フェードインさせたい </title> <script language="JavaScript"> <!-- r_color="000123456789abcd"; g_color="0123456789abcdef"; b_color="000123456789abcd"; function fadein(pos,speed){ clearTimeout(timer1); r=r_color.charAt(pos); g=g_color.charAt(pos); b=b_color.charAt(pos); document.bgColor="#"+r+r+g+g+b+b; if(pos<15){ timer1=setTImeout("fadein("+(pos+1)+","+speed+")",speed); }else{ clearTImeout(timer1); } } //--> </script> </head> <body text"#000000"onLoad="timer1=setTimeout('fadein(0,100)',100)"> <font size="5">フェードインします</font> </body> </html> 以上のタグが今勉強している本に載っていたのですが 最初にonloadで呼び出された関数の中にClearTImeaout （１１行目）にありますがそこでこの関数はとまって しまわないのでしょうか？ また二つSettimeaoutがありますが二つとも識別する 単語がtimer1で同じですけどごっちゃにならないのでしょうか？
- R7414
- お礼率97% (47/48)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
まずは、コピペして動かしてみたのですが、動きませんでした。 onLoadの前のスペースが無いのと、setTimeoutがsetTImeoutになってたので、 動きませんでした。コピーする時は稼動確認してくださいね。 で、ご質問の 「最初にonloadで呼び出された関数の中にClearTImeaout （１１行目）にありますがそこでこの関数はとまって しまわないのでしょうか？」 ですが、確かに止まります。 でも、再度setTimeoutを呼んでいますので、 処理は継続されます。 「また二つSettimeaoutがありますが二つとも識別する 単語がtimer1で同じですけどごっちゃにならないのでしょうか？」 setTimeout関数の返却値であるTimer_idは、同じでなければいけません。 これは、一度目にsetTimeout関数を使用したときにIDが振られ、 timer1に取得されますそれが、fadein関数内のclearTimeoutで 止めなくてはいけないので、取得しておく必要があります。 また、fadein関数内部でのsetTimeout関数で取得したものも、 処理を止めるためにIDの取得が必要となります。 うまく説明できているかわかりませんが、 こんな感じでよろしいでしょうか。 以下にコメント記入したソースを記しておきます。 <html> <head> <title>フェードインさせたい </title> <script language="JavaScript"> <!-- r_color="000123456789abcd"; g_color="0123456789abcdef"; b_color="000123456789abcd"; function fadein(pos,speed){ //無限処理を一度止める clearTimeout(timer1); //必要データセット r=r_color.charAt(pos); g=g_color.charAt(pos); b=b_color.charAt(pos); document.bgColor="#"+r+r+g+g+b+b; if(pos<15){ //処理を再稼動させる timer1=setTimeout("fadein("+(pos+1)+","+speed+")",speed); }else{ //処理をとめる clearTimeout(timer1); } } function aaa(){ //無限に処理をさせる //100ミリ秒待って、 fadein(0,100) を評価する timer1=setTimeout('fadein(0,100)',100); } //--> </script> </head> <body text"#000000" onLoad="aaa()"> <font size="5">フェードインします</font> </body> </html>
関連するQ&A
- setTimeout関数の使用方法について
はじめまして。 質問があります。 以下のコードを実行すると、一定時間おきに文字の表示が変化する ように動いてくれません。何が問題なのかがまったく見当がつき ません。どなたかご指摘をお願いします。 ---------------------------------------------------------------- <html> <head> <title>setTimeout()関数の使用例</title> </head> <body onLoad="timer=setTimeout('changeChar()',500)"> <script type="text/javascript"> <!-- var str = "abcdefghijklmnopqrstuvwxyz0123456789"; var cnt = 0; function changeChar() { clearTimeout(timer); ch = str.charAt(cnt++); document.write(ch); if(str.length > cnt) { timer = setTimeout("changeChar()",500); } } //--> </script> </body> </html> ----------------------------------------------------------------
- ベストアンサー
- JavaScript
- 文字をフェードインするHTML教えて下さい
infoseekで勉強しながら会社のHP作ってますが、 文字をフェードインする方法が上手くいきません。 <script language="JavaScript"> <!-- count=0; Num=1; Time=100; function FadeIn(str){ c=str.charAt(count++); for(i=0;i<Num;i++){ document.all["Fade"+i].style.color="#"+c+c+c+c+c+c; } if(count<str.length){ setTimeout("FadeIn('"+str+"')",100); } } //--> </script> 次に、<body>タグ内を<BODY onload="FadeIn('fedcba9876543210')" >と変更すると、JAVAスクリプトの準備は終了になります。 後は、フェードインさせたい文字を、<span id="Fade0">文字列</span>と設定します。これで、文字がじんわりとフェードインして現れます。 上記はサンプルのコピーで、固定のバナーの下にHPへようこそ！という文字がフェードインします。 なのですが、どの部分がバナーのHTMLか、文字のHTMLか分からなく、 ＞＞、<span id="Fade0">文字列</span> この意味もわかりません。表示したい文字を「文字列」に置き換えれば良いのですか？？そしてこの一文をどこに組み込めば良いのかもわかりません・・・。 何度かやってみましたがエラーになってしまいます。 他の方法でも良いので、お解かりになるかた宜しくお願いいたします！
- ベストアンサー
- ホームページ作成ソフト
- 黒背景で、白文字（リンク挿入）をフェードインするHTMLソースを教えて
黒背景で、白文字（リンク挿入）をフェードインするHTMLソースを教えてください。 <head>の間に、 <script language="JavaScript"> <!-- var count = 0; var f3 = "0123456789abcdef"; function fadein(i) { if ( count < 16 ) { c = f3.charAt(i); document.fgColor = c + c + c + c + c + c; count++; setTimeout("fadein(count)",100); } } fadein(); //--> </script> </head> <body bgcolor="#000000" text="#ffffff"> 以上のタグを入れ、 <body bgcolor="#000000" text="#ffffff"> タグを<body>の代わりに置くと、リンク挿入されていない文字はフェードインされるのですが、リンク挿入文字は対応されません。 ソースをどのようにすれば、リンク挿入文字もフェードイン対応されるでしょうか。
- ベストアンサー
- JavaScript
- 二つのフィルタを同時に使用したい
よろしくお願いいたします。 フェードインと光源のフィルタを同時に使用したいと希望しております。 現在、ページを開くと、画像がフェードインするようになっています。 n = 0; function fadein() { if (n > 100) return; n += 10; IMG1.filters['alpha'].opacity = n; setTimeout("fadein()",200); } ～ <BODY onload="fadein();"> （ちなみに実際には、この画像はページを開くたびに変わります。） document.write("～ id='IMG1' name='name1' style='filter:alpha(opacity=0);'>"); さらにこれに、例えば以下のような光源フィルタを追加したいと希望し試行錯誤しておりましたがどうしてもうまくいきません。 name1.filters.light.addAmbient(255, 255, 255, 50) name1.filters.light.addcone(1, 1, 1, 150,150,255,255,255,100,50) 恐れ入りますが何卒ご教授いただきたくお願いいたします。 申し訳ございませんが、具体的にどのように書けばよいかソースを添付いただけると大変ありがたいです。よろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryでfadeInのタイミング（Speed
jQueryを勉強中で、こちらのページにある、 時間差で要素がフェードインするスプリクトを 参考にさせていただいています。 http://y-growth.com/blog/archives/281.html サンプルでは、 $("#fade li:nth-child(1)").fadeIn("5000",function() { $("#fade li:nth-child(2)").fadeIn("5000",function() { $("#fade li:nth-child(3)").fadeIn("5000", function(){ となっていて、等間隔でフェードインさせています。 このフェードの間隔を調整したいのですが、 $("#fade li:nth-child(1)").fadeIn("50000",function() { $("#fade li:nth-child(2)").fadeIn("10000",function() { $("#fade li:nth-child(3)").fadeIn("5000", function(){ このようにSpeedの値を変更しても、 等間隔でフェードインしてしまいます。 また、このような指定でも、同時にフェードインしてしまいます。 $("#fade li:nth-child(1)").fadeIn("50000"); $("#fade li:nth-child(2)").fadeIn("10000"); 何か見落としがあるのでしょうか？ どなたか、どうぞよろしくお願いいたします。
- ベストアンサー
- デザイナー・クリエイティブ職
- 5秒後にフェードイン
以下の画像がフェードインするプログラムで、5秒後にフェードインを実行するように設定するにはどうしたらよいでしょうか？ どなたかご教授ください。 <script language="JavaScript"> <!-- function fadein(id) { app = navigator.appName.charAt(0); ver = navigator.appVersion.charAt(0); if ((app == "M") && (ver >= 4)) { document.all.item(id).style.visibility = "hidden"; document.all.item(id).filters[0].apply(); document.all.item(id).style.visibility = "visible"; document.all.item(id).filters[0].play(); } } // --> </script> </head> <body bgcolor="white" text="red" link="blue" vlink="purple" alink="red" class="style" onload="fadein('img1');"> <p align="right"> <img src="non.jpg" id="img1" style="filter:revealTrans(duration=3.0,Transition=12); visibility=hidden;"> </p> </body>
- ベストアンサー
- JavaScript
- 背景色を一定時間ごとにランダム変化
http://wakabano.cool.ne.jp/dream/useful/snippets/sni_03.html ↑のページを参考に、特定の要素の背景色を一定時間ごとにランダム変化するJavascriptを考えた末、以下のようになりました。 function ChangeBg(){ var r,g,b; r = decToHex(randomNumber(256)-1); g = decToHex(randomNumber(256)-1); b = decToHex(randomNumber(256)-1); if(document.getElementById){ document.getElementById('vector').style.backgroundColor= "#" + r + g + b ; T_ID=setTimeout("ChangeBg()",30000); } else{ if(document.all){ document.all('vector').style.backgroundColor= "#" + r + g + b ; T_ID=setTimeout("ChangeBg()",30000); } } } function randomNumber(limit){ return Math.floor(Math.random()*limit); } function decToHex(dec) { var hexStr = "0123456789ABCDEF"; var low = dec % 16; var high = (dec - low)/16; hex = "" + hexStr.charAt(high) + hexStr.charAt(low); return hex; } これに、<body onLoad="ChangeBg()">と書いて、30秒ごとにid名が「vector」の<div>要素の背景色を変化させることには成功したのですが、たとえばclass名が同じ複数の<div>要素の背景色を一定時間ごとに変化させることは可能でしょうか。また、<body onLoad="ChangeBg('abc')">のように、id名をhtmlから指定する場合はどうすればいいのでしょうか。 前者は全くやり方がわからなくて、後者は四苦八苦した末、ページロード時にランダムに変わるのみで、その後は変化しませでした。
- ベストアンサー
- JavaScript
- JFrameをフェードイン・フェードアウトさせたい
JFrameを弄って、フェードしている間にJPanelを入れ替えたいと考えています。 newした時だけなぜかフェードイン後になります。 字数制限上省略しているので必要があれば補足などに追記します。 ****** public class MyFrame extends JFrame { public static final int NON_FADE = 0; public static final int IN_FADE = 1; public static final int FADE_OUTING = 2; public static final int FADE_INING = 3; private FadePane pane; private JPanel nowPanel; private Color fadeColor = Color.BLACK; private int fadeTime = 500; private int fadeStatus = NON_FADE; private boolean fadable = true; public MyFrame() { pane = new FadePane(); setGlassPane(pane); fadeOut(0, fadeColor); } public void fadeOut(int time, Color color) { setFadeColor(color); if (fadeStatus != NON_FADE) { return; } fadeStatus = FADE_OUTING; pane.fadeOut(time, color); fadeStatus = IN_FADE; } public void fadeIn(int time) { if (fadeStatus != IN_FADE) { return; } fadeStatus = FADE_INING; pane.fadeIn(time, getFadeColor()); fadeStatus = NON_FADE; repaint(); } public void setFadeColor(Color color) { if (color == null) { return; } if (fadeColor.equals(color)) { return; } fadeColor = color; this.getContentPane().setBackground(fadeColor); this.getContentPane().repaint(); } public void setPanel(JPanel panel) { if (fadable && !(nowPanel == null)) { fadeOut(fadeTime, fadeColor); } if(nowPanel!=null)this.getContentPane().remove(nowPanel); nowPanel = panel; if(nowPanel!=null)this.getContentPane().add(nowPanel); nowPanel.repaint(); if (fadable && !(nowPanel == null)) { fadeIn(fadeTime); } } private class FadePane extends JComponent { private JComponent com = this; private Color color = Color.BLACK; private final int renewalTime = 10; public void fadeOut(int time, Color color) { this.color = color; int red = color.getRed(); int green = color.getGreen(); int blue = color.getBlue(); int alpha = color.getAlpha(); FadeListener listener = new FadeListener(true, red, green, blue, alpha, time, renewalTime, this); Timer timer = new Timer(renewalTime, listener); listener.setTimer(timer); timer.start(); synchronized (this) { try { wait(); } catch (InterruptedException ex) { ex.printStackTrace(); } } } public void fadeIn(int time, Color color) { this.color = color; int red = color.getRed(); int green = color.getGreen(); int blue = color.getBlue(); int alpha = color.getAlpha(); FadeListener listener = new FadeListener(false, red, green, blue, alpha, time, renewalTime, this); Timer timer = new Timer(renewalTime, listener); listener.setTimer(timer); timer.start(); synchronized (this) { try { wait(); } catch (InterruptedException ex) { ex.printStackTrace(); } } } public synchronized void wakeup() { notifyAll(); } @Override protected void paintComponent(final Graphics g) { Graphics2D g2 = (Graphics2D) g; g2.setColor(color); g2.fillRect(0, 0, this.getWidth(), this.getHeight()); } private class FadeListener implements ActionListener { //true:フェードアウト //false:フェードイン final boolean mode; final int red; final int green; final int blue; final int alpha; Timer timer; final int allTime; int time = 0; final int dTime; FadePane pane; public FadeListener(boolean mode, int red, int green, int blue, int alpha, int time, int dTime, FadePane pane) { this.mode = mode; this.red = red; this.green = green; this.blue = blue; this.alpha = alpha; this.allTime = (time / dTime) + 1; this.dTime = dTime; this.pane = pane; } public void setTimer(Timer timer) { this.timer = timer; } @Override public void actionPerformed(ActionEvent e) { if (time == 0) { com.setVisible(!mode); } time++; if (time > allTime) { com.setVisible(mode); timer.stop(); pane.wakeup(); return; } com.setVisible(true); int nowAlpha = mode ? alpha * time / allTime : alpha - (alpha * time / allTime); color = new Color(red, green, blue, nowAlpha); com.repaint(); } } } }
- ベストアンサー
- Java
- スクロールの時間調節
初めて投稿します。 よろしくお願いします。 下記のような ソースで テキストのスクロールをしようと思いますが スクロールの早さの調節をしたい場合どうしたらよいのでしょう？ プログラムには詳しくないので すぐに使える状態で教えていただけませんか？ <SCRIPT language=JavaScript> <!-- var count,max,timer function init(){ count=0 max=(document.all?document.body.scrollHeight:document.height?document.height:1000) autoScroll() } function autoScroll() { if(navigator.appVersion.charAt(0)>=3) { if(count<max) { window.scroll(0,count++); timer=setTimeout("autoScroll()",4); } } } //--> </SCRIPT> <BODY onload=init()>
- 締切済み
- JavaScript
- スクロールメニューが宣言を入れるとIEだけでしか動作しないので、困っています。
サイドメニューバーをスクールに合わせて動く、スクリプトを使っていますが、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">を入れると、 IEでしか、動きません。 また、上記の宣言を抜くと、IE以外では動きますが、 IEでのCSS表示が崩れてしまいます。 原因を教えてください。 使用しているスクリプトは下記です。 <script type="text/javascript"> var timer window.onload = scrolltop; window.onunload = stoptimer; function scrolltop() { var menu = document.getElementById('scrollmenu'); var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; menu.style.top = scrollTop; timer = setTimeout("scrolltop()",10); } function stoptimer() { clearTimeout(timer) } </script> 何卒、宜しくお願いします。
- ベストアンサー
- JavaScript
お礼
>まずは、コピペして動かしてみたのですが、動きませんで>した。 すいませんでした 本に載ってる奴をそのまま入力したとおもっていたのですがミスってしまいましたTT 次からはご指摘通りに確認してからコピペすることにします本当にすいませんでした また丁寧なご説明ありがとうございました！ 一度止めておいてまた再開するということですね