質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

受付中

TickerのsetIntervalを制御したい

cofcof
cofcof

総合スコア38

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0評価

0クリップ

150閲覧

投稿2022/01/23 02:27

編集2022/01/25 04:22

レスポンシブ対応のTicker(一時停止ボタン付き)を作りたいと思っています。
内容によって高さの異なる要素の、一番高さがあるものにサイズをあわせてTickerを作動させています。
ただ途中でリサイズした場合、高さが変わってしまうためボックスから要素がはみ出て文字が欠けてしまいます。
jQueryの一行目を$(window).on( 'load resize', function() {に変えれば高さの変化には対応できるのですが、
今度横にスクロールしていくアニメーションの挙動がおかしくなってしまいます。
以前似たような質問をした時にsetIntervalをキャンセルすればというアドバイスをいただいたのですが、
この中にどう組み込めばよいかわからず、色々書いてみたものの動かず修正できませんでした。
どなたかうまく動く書き方を教えていただけないでしょうか。

HTML

<div class="wrap"> <div class="js-ticker"> <ul> <li>内容入ります。内容入ります。内容入ります。内容入ります。内容入ります。</li> <li>内容入ります。内容入ります。内容入ります。内容入ります。内容入ります。</li> <li>内容入ります。内容入ります。内容入ります。内容入ります。内容入ります。内容入ります。内容入ります。内容入ります。内容入ります。内容入ります。</li> </ul> </div> </div>

CSS

.wrap { overflow: hidden; padding: 0.5rem 0.5rem 0; } .js-ticker { position: relative; width: 100%; } .js-ticker ul { line-height: 1.5; width: 100%; position: relative; display: flex; } .js-ticker ul li { width: 100%; padding: 0; display: none; }

jQuery

$(window).on( 'load', function() { var $setElm = $('.js-ticker'); var effectSpeed = 1000; var switchDelay = 5000; var easing = 'swing'; $setElm.each(function(){ var $targetObj = $(this); var $targetUl = $targetObj.children('ul'); var $targetLi = $targetObj.find('li'); var $setList = $targetObj.find('li:first'); var ulWidth = $targetUl.width(); var h = 0; $targetLi.each(function(){ if($(this).outerHeight() > h){ h = $(this).outerHeight(); } }); var listHeight = h; $targetObj.css({height:(listHeight)}); $targetLi.css({top:'0',left:'0',position:'absolute'}); var liCont = $targetLi.length; $setList.css({left:(ulWidth),display:'block',opacity:'0',zIndex:'98'}).stop().animate({left:'0',opacity:'1'},effectSpeed,easing).addClass('showlist'); if(liCont > 1) { setInterval(function(){ var $activeShow = $targetObj.find('.showlist'); $activeShow.animate({left:(-(ulWidth)),opacity:'0'},effectSpeed,easing).next().css({left:(ulWidth),display:'block',opacity:'0',zIndex:'99'}).animate({left:'0',opacity:'1'},effectSpeed,easing).addClass('showlist').end().appendTo($targetUl).css({zIndex:'98'}).removeClass('showlist'); },switchDelay); } }); });

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。