• ベストアンサー

setTimeoutでオブジェクト表示非表示の切替

・setTimeoutでオブジェクトの「表示」「非表示」切替は出来るでしょうか？ ・ページを更新しないと出来ない、とかあるのでしょうか？ ・クリック処理等をせずに、自動で切り替える処理があれば知りたいです。 ・例えば、5秒間隔ぐらいで、指定要素の「表示」「非表示」自動切替をしたいのですが… ・jQueryは使っても使わなくても良いです

  • re97
  • お礼率80% (601/744)

質問者が選んだベストアンサー

  • ベストアンサー
  • warpspace
  • ベストアンサー率56% (83/147)
回答No.1

jQueryの例です。ページを開くと自動的に開始され、５秒ごとに表示／非表示を 繰り返します。 [スクリプト]　（＿を半角スペースに変更してください） $(function(){ ＿setInterval(function(){ ＿＿$('.tenmetsu').toggle(); ＿},5000); }); [HTML] <div class="tenmetsu"><p>５秒ごとに点滅</p></div>

re97
質問者

お礼

回答ありがとうございました 期待通りに動作しました 大変参考になりましたー

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JscriptでsetTimeout

    JscriptでＩＥを操作してあるページのリンクをクリックしたいです。 リンクにjavascriptが入っているため同期処理でクリックすると、 その先に進みません。 そのため非同期処理でクリックしたく、setTimeoutを使って 関数を作りましたが動きません。 setTimeout('function ck(ie,ID){ ie.document.querySelector(ID).click();}',10); ※ieはＩＥオブジェクト、iDはリンクのＩＤ属性です。 ちなみに上記をＶＢＡから呼び出して動かしています。 setTimeoutをはずせば普通に動きました。 setTimeoutはwindowオブジェクトが必要なので、 それを省略しているのが悪いとも考えましたが、 VBAでどうやってIEのwindowオブジェクトを作るのかが分かりません。 setTimeout以外にも非同期実行できる方法があれば それでも構いません。 どうかご教授お願いいたします。

  • setTimeoutをループさせDOMを処理したい

    「setTimeout」「for文」「jQuery」を利用して、1秒ごとに、 <div class="hoge1">、<div class="hoge2">、<div class="hoge3">へ対して、同じ処理をしたいです ■処理内容イメージ ・ループカウントの変数iを渡して、それぞれのdiv内で、1、2、3と表示 ■質問 「setTimeout」を1秒ごとに、指定DOMへ対して、ループさせる方法を教えてください ※ループできるなら、「for文」じゃなくても良いです

  • window.setTimeoutについて

    window.setTimeout - 指定秒後に処理を実行で、たとえばyahooのホームページを表示した5秒後に、googleのホームページを表示するにはどういうスクリプトにしたら良いですか？お願いします。 java script 初心者で、いきなり壁にぶち当たったのでよろしければ御教えください。

  • XPでのwindow.setTimeout代用？

    JAVA SCRIPT初心者です。 自分のHPで新規に開いた特定のページを指定時間後に閉じる為に window.setTimeoutを使っておりましたが、XP等ではうまく作動しないので困っています。 　１．window.openで新しいページを開く。 　２．window.setTimeoutで30秒後に１で開いたページを閉じる。 window.setTimeoutを使用しないで同じような事が出来るのでしょうか？ 　勉強不足なのですが、タイマーの関数、指定した開いているページを閉じる関数等があるのかどうかわかりません。

  • ページが完全に表示されてから何かをする?

    ページが完全に読み込まれてから１０秒後に指定したページへ飛ぶというサンプルをみかけました。 以下のようなものです。 <body onLoad=setTimeout('location.href="next.html"',10000)> setTimeoutは指定した時間ごとに処理を行うものというのは分かりましたが、しかし上記のコードでは、単に十秒後にnext.htmlへ飛ぶというだけで、「ページが完全に読み込まれてから」というのは実現できないように思うのですが、しかし実行してみると期待したとおりに動きます。 いったいどういうからくりなのでしょうか？

    • ベストアンサー
    • HTML
  • JavaScriptのsetTimeoutについて

    setTimeoutのタイマー処理の仕様を調べています。 var func = function () { alert(1); }; setTimeout(func, 1000); alert(2); このコードを実行した場合、alert(2)→alert(1)の順で処理されるのは当然ですが、 alert(2)を開いたまま1秒以上待ち、そこでOKボタンを押すとどうなるか、という問題です。 Firefoxの実装については下記ページで分かりました。 http://takoyakim.tumblr.com/post/10875885/firefox-settimeout 先ほどのコードの1000ミリ秒の経過処理は、タイマースレッドという専用スレッドで扱うため、 alert(2)で1000ミリ秒以上止めた後にOKボタンを押すと、即座にalert(1)が開きます。 しかしIEの場合はそうではなく、alert(2)を閉じてから約1000ミリ秒後にalert(1)が開きました。 alert(2)を開いたままどれだけ待機しても変わりません。 ChromeやSafariもIEと同じようです。 ですがこの結果は、次のコードの実行結果と矛盾してしまいました。 var heavyFunc = function () { for(var i = 0; i < 100000; i++) new Date(); } var startTime = +new Date(); var callCount = 0; var testFunc = function (x) { heavyFunc(); // (1) if (++callCount < 5) setTimeout(testFunc, 100); else alert(+new Date() - startTime); //heavyFunc(); // (2) }; testFunc(); heavyFuncという重い処理を、setTimeoutの前後のどちらに置くかという実験コードです。 setTimeoutのタイマー処理がFirefoxのように別スレッドで実行されているのであれば、 先にsetTimeoutを呼び出してからheavyFuncを実行した方が速く処理が完了するだろう、という想定です。 そして結果は、FirefoxだけでなくIEとChromeでも先にsetTimeoutを呼んだ方が速い、となりました。 結局どのブラウザも専用のタイマースレッドを実装しており、 alert関数が特殊（タイマースレッドもブロックする）なだけ、ということなのでしょうか？ それとも私が何か見落としているのでしょうか。

  • setTimeout()がうまくいきません

    以前、時計を一秒一秒、新しい絵を読み込んで バー表示型の時計を作ろうとしていた者ですが なんとか、１つの画像を連続表示させて 一本のバーにしていくスクリプトを 下記のように作りました そうしたところ、手動で更新をすると、うまく動作するのですが 自動で更新していこうと思いsetTimeout()を入れたのですが うまく動作してくれません。どのようにしたらよいのでしょうか <html> <head> <script language="JavaScript1.1"> <!-- function timesec() { var now = new Date() var s = now.getSeconds() var x = 60-s for(gj=0;gj<x;gj++) { var no = gj+1*x document.write("<img src='sec_1.gif' NAME='Name"+no+"'>") } } //--> </script> </head> <body> <script language="JavaScript1.1"> <!-- timesec() ----> </script> </body> </html>

  • ウインドウの自動切替について

    WordやExcel、YouTubeの画面などの開いているウインドウを自動的（30秒間隔など）で切替表示したいのですが何かいい方法ありませんか？ ネットで検索したのですがよくわかるものがなかったので質問させて頂きました。 どなたか知恵を貸してください。 よろしくお願い致します。

  • クリックで表示/非表示の切り替え

    私は今現在HPを作成しているのですが、その中の特定のページでテキストをクリックしたら表示/非表示の切り替えをしたいと考えてます。 表示/非表示自体は検索して出てきたオープンソースを拝借したら出来ました。 ソースは下記のように記述してます。 しかし、既存の状態だと『テキスト1』をクリックして表示させたらもう一度『テキスト1』をクリックしない限り非表示にはなりません。 『テキスト1』をクリックして表示している状態で『テキスト2』をクリックしたら自動的に『テキスト1』の表示されてる部分を非表示しにしたいのですが。 <head> <SCRIPT type="text/JavaScript"> <!-- function showHide(targetID) { //functionの宣言。受けとったIDは変数targetIDに格納。 if( document.getElementById(targetID)) { //指定のIDのついたオブジェクトがあったら処理する //指定されたIDのstyle.displayがnoneなら if( document.getElementById(targetID).style.display == "none") { //blockに変更する document.getElementById(targetID).style.display = "block"; } else { //noneでなければ、つまりblockなら //noneにする document.getElementById(targetID).style.display = "none"; } } } //--> </SCRIPT> </head> <body> <a href="#" onClick="showHide('SH-001');return false;">テキスト1</a> <a href="#" onClick="showHide('SH-002');return false;">テキスト2</a> <div id="SH-001" style="display: none">テキスト1をクリックしたら表示される部分</div> <div id="SH-002" style="display: none">テキスト2をクリックしたら表示される部分</div> </body> Javascriptについてはまだ知識がなく解決方法が皆目見当もつきません。 ご存知の方いらっしゃいましたらご教示ください。 よろしくお願いします。

  • setTimeout()が使えない

    今、JavaScriptでリアルタイムで動く時計を作ってるのですが、setTimeoutが動かないため使えません。 時刻は表示するのですが、自動更新してくれません。 JavaScriptのサイトの時計は動いているんですけど、自分の作ったのだと動いてくれません。 ---- function Clock() { dd = new Date(); Year = dd.getFullYear(); Mon = dd.getMonth()+1; Date = dd.getDate(); Days = new Array("日","月","火","水","木","金","土"); Day = Days[dd.getDay()]; AMPM = ""; Hour = dd.getHours(); Min = dd.getMinutes(); Sec = dd.getSeconds(); if (Hour > 12) { Hour = dd.getHours()-12; AMPM = "午後"; } else { AMPM = "午前"; } if (Hour < 10) Hour = "0"+Hour; if (Min < 10) Min = "0"+Min; if (Sec < 10) Sec = "0"+Sec; document.myForm.Time.value = Year+"年"+Mon+"月"+Date+"日（"+Day+"） "+AP+Hour+"時"+Min+"分"+Sec+"秒"; setTimeout("Clock()", 1000); } ---- 「<body onLoad="Clock()">」はしています。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する