- ベストアンサー
テキストを繰り返し表記・非表示にする方法
amanojaku1の回答
- amanojaku1
- ベストアンサー率54% (265/488)
下記はJavaScriptではなく、HTML、CSSの話です。 [CSS3][Sass] 要素を順番にフワッと表示するアニメーションを CSS の animation プロパティで作る https://memocarilog.info/webdesign/8050 CSS3のtransition-timing-functionの動きをサンプルで理解しよう http://weboook.blog22.fc2.com/blog-entry-313.html 「linear、ease～」の違いが視覚的に分かるサイト(サイトには「transition-timing-functionの違い」と書かれています)。 下記はJavaScriptではなく、HTML、CSSのソースです。 「opacity」は透明度。 >animation: FadeOutAnima 1s linear 0s 1 forwards; ↑2番目の数字がスタート：この例では0秒後にスタート(つまり、すぐスタート)。 1番目の数字がアニメーションを実行する時間：この例では1秒間アニメーションする。 3番目の数字が「FadeOutAnima」のキーワード(予約語ではありません)で参照される「@keyframes」の「100%」に対応する？、その「100%」は そのブロック内の「opacity: 1;」(透明度：1)に対応する。 >animation: FadeInAnima 1s linear 1s 1 forwards; ↑2番目の数字がスタート：この例では1秒後にスタート。 1番目の数字がアニメーションを実行する時間：この例では1秒間アニメーションする。 3番目の数字が「FadeInAnima」のキーワード(予約語ではありません)で参照される「@keyframes」の「100%」に対応する？、その「100%」は そのブロック内の「opacity: 0;」(透明度：0)に対応する。 <html> <head> <meta http-equiv="Content-Type" content="Text/HTML; charset=Shift_JIS"> <style type="text/css"> <!-- .FadeOutAnimaCS { color: #000; opacity: 0; } .FadeOutAnimaCS { animation: FadeOutAnima 1s linear 0s 1 forwards; } @keyframes FadeOutAnima { 100% { opacity: 1; } } .FadeInAnimaCS { color: #000; opacity: 1; } .FadeInAnimaCS { animation: FadeInAnima 1s linear 1s 1 forwards; } @keyframes FadeInAnima { 100% { opacity: 0; } } --> </style </head> <ul> <li class="FadeOutAnimaCS">hoge</li> <li class="FadeInAnimaCS">piyo</li> </ul> </html>
関連するQ&A
- 一定時間後にsetIntervalでループ処理を行うにはどうしたらいい
一定時間後にsetIntervalでループ処理を行うにはどうしたらいいのでしょうか。 JavaScriptにwait関数があれば早いのですが、setTimeout（）のなかに入れ込むしか思いつきません。 forやwhile等で空ループさせて終了後に実行という方法も考えましたが、CPUに余計な負荷がかかるみたいでこれは避けたいです。 具体的には次のようなことがしたいと思っています。 function(a,b,c){ setTimeout(function(){ setInterval(function(){} ,10 ) },c) しかしこれだと再下段の関数が実行されないようです。またループ処理は可能な限りsetInterval()にさせたいと思っています。クロージャで解決できるんでしょうか。何か良い方法がありましたらお願いします。
- ベストアンサー
- JavaScript
- fizzbuzzがうまくいきません
fizzbuzzがうまくいきません https://codepen.io/anon/pen/mWbvbp?editors=1112 fizzbuzzだけになってしまいます。 つまりあまりが両方ともすっと0になっているようですが、 なぜ1づつ増えて行っていないのでしょうか？ インスペクタで見ると3fizと5fizは0になっています。 始めは0割る3はあまりが0なので初めのあまりは0だからでしょうか？ するとループ処理の結果どうなっているかというのはインスペクタで見ることはできないのでしょうか？
- ベストアンサー
- JavaScript
- 繰り返し処理をして、要素がいくつあっても、うまくい
while文で繰り返し処理をして、要素がいくつあっても、うまくいくようにしたいのですが、var inputResultをカプセル化できないのでこのような場合どうすればいいのでしょうか？ https://codepen.io/anon/pen/XqOWrQ document.querySelectorAll('.js-myBtn').addEventListener と変更したのですが、このボタンの一つ目を押したら一つ目として実行二つ目以降も同様にとなりません。 イベントを起こすトリガーの要素を配列で指定はできないのでしょうか？
- ベストアンサー
- JavaScript
- スタックオーバーフローとでてきて、ちゃんと動きませ
https://okwave.jp/qa/q9340961.html の続き ncaught RangeError: Maximum call stack size exceeded 変更後によってブラウザはフリーズしなくなりましたが、まだスタックオーバーフローとでてきて、ちゃんと動きません。 forをなくしてもまだループ処理によって問題が起きているのでしょうか？ https://codepen.io/anon/pen/zzqjKg
- ベストアンサー
- JavaScript
- 二度実行するのを防止したい。
クイズゲームの判定で、複数入力された回答の一つでも正解があれば正解とするようにしたのですが、正解の処理を一度しても処理が終わらずに二度点数が入ってしまうので一度でも正解になったらそこで処理を止めたいのですがexitを入れた所今度はうまく動かなくなりました。 この方法は間違えないのでしょうか？ https://codepen.io/anon/pen/bKoObo
- 締切済み
- JavaScript
- チェックボックスがすべてfalseになる
チェックボックスがチェックされているか否かによって 処理をかえたいのですが なぜかチェックをしていてもすべてfalseになってしまいます。 これはチェックしていればtrue、していなければfalseになるはずなんですよね？ 一部抜粋しました。 https://codepen.io/anon/pen/jmoLmQ
- ベストアンサー
- JavaScript
- 一定時間が経過した後のフレーム移動について
Flash初心者です。うまく質問したいことが伝わるか心配ですが、どうぞ宜しくお願いします。 タブメニュー型のムービーを作成していまして、10秒経過すると次のタブが開き、 また10秒すると次のタブが開く…。このループです。 タブの数は4つ。1フレームごとにそれぞれのタブが開いているように画像で見せておいて（計4フレームを使用）、 スクリプトで10秒の間隔をおき、次のフレームに移動させる仕組みになっています。 タブにはクリックできるようにボタンが仕込んであり、クリックするとムービーの流れ（再生されている順）に関係なく、 そのタブに移動します（2つ目のタブなら2フレーム目を再生）。 （タブの部分のテキスト、タブが開いたときに表示されるバナー画像は外部読み込みになっています。 ただ、この外部読み込みに関しては質問の内容に影響しないと思いますので詳しくは説明しないでおきます。） スクリプトは下記のとおりです。（注：教えて！gooにあったものを使わせていただきました。） ※1フレーム目 --------------------------------------------------------------------- this.stop(); timerID = setInterval(startMovie, 10000); function startMovie() { gotoAndPlay(2); clearInterval(timerID); } ※2フレーム目 --------------------------------------------------------------------- this.stop(); timerID2 = setInterval(startMovie2, 10000); function startMovie2() { gotoAndPlay(3); clearInterval(timerID2); } ※3フレーム目 --------------------------------------------------------------------- this.stop(); timerID3 = setInterval(startMovie3, 10000); function startMovie3() { gotoAndPlay(4); clearInterval(timerID3); } ※4フレーム目 --------------------------------------------------------------------- this.stop(); timerID4 = setInterval(startMovie4, 10000); function startMovie4() { gotoAndPlay(1); clearInterval(timerID4); } これでちゃんと10秒経過すると次のフレームに移動し、それがループされるのですが 問題は、途中で順に再生されているタブと違うタブをクリックしたときに起こります。 一度、その再生順がクリックすることによって変わってしまうと、元々の『10秒後に次のフレームへの移動』の動きと、 クリックされたタブから『10秒後に次のフレームへの移動』の動きが重複しているようなんです。 ちゃんと確認できたわけではありませんが、複数回これを繰り返すと4つのタブがかなりの速度でパッパッパと遷移し、 まともに見ることすらできないものになってしまいます。 解決したいのは、クリックしたタブ（移動したフレーム）から新たに10秒がカウントされ、10秒後には次のフレームに移動し 10秒経過する前に他のタブをクリックしたときでも、そのタブ（フレーム）に移動してからまた新たに10秒がカウントされる…。 このようにするにはどうしたらいいでしょうか？ どうぞご教示ください。
- 締切済み
- Flash
- 空の要素の文字列を取得するとnullではなくund
空の要素の文字列を取得するとnullではなくundefinedが返ってくるのはなぜでしょうか？ var history1Txt = history1.value; また値が入っていてもundefinedが返ってきます。 値が入っている時だけ新しい履歴のテキストを古い履歴にコピーして、常に履歴がサイクルするようにしたいです。 https://codepen.io/anon/pen/MVzRLa
- ベストアンサー
- JavaScript
- 数秒後に別フレームにとばす方法
1フレーム目で画像を読み込み10秒表示させた後に２フレーム目でまた10秒表示させるといった事を試しています。 表示させる画像はムービークリップで最後の1秒でフェードアウトさせるようにしているのですが 完全にフェードアウトする前に2フレーム目に飛んでしまいます。 何か解決方法はないのでしょうか？？ 1フレーム目 ---------------------------------------------------------- this.stop(); timerID = setInterval(startMovie, 10000); function startMovie() { clearInterval(timerID); gotoAndStop(2); } 2フレーム目 ---------------------------------------------------------- this.stop(); timerID = setInterval(startMovie, 10000); function startMovie() { clearInterval(timerID); gotoAndStop(1); } ちなみにgotoAndStop();を消すとそのフレームでループしますが完全にフェードアウトしてくれます…。
- ベストアンサー
- Flash
- 処理時間により、その後の処理の分岐をしたいのですが
PHPスクリプト内にて、ある処理が例えば30秒以上かかった場合は、その瞬間にexit()やエラーをecho()というような 実装をしたいと思うのですが、どのように書けばいいのか思いつきません。 function hoge() { /* 処理内容 */ //α return $foo; } $foo = hoge(); //β があった場合、どこに、どのように書けばいいのでしょうか？ 簡単に書けば、 $time = time(); if(time() - $time >30) { echo "時間超過"; } のような時間的処理分岐を入れたいと思うのですが。 αやβの前に$time = time();を置いたとしても、αの"処理内容"やβの関数実行の後にif(){}節を入れることになるので、 逐次処理のせいで、処理が15分かかった後とかにエラー出力とかになってしまいます。 自分は、何かをスクリプト中で実行し、その処理が30秒を超えた場合はエラーを出したいと考えております。 上記のような分岐方法でなくてもいいのですが、どのように書けばいいのかアドバイス頂けないでしょうか？
- ベストアンサー
- PHP