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

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

新規登録して質問してみよう
ただいま回答率
85.48%
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オブジェクト」のメソッドとして定義されています。

Q&A

0回答

254閲覧

TickerのsetIntervalを制御したい

cofcof

総合スコア37

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オブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2022/01/23 02:27

編集2022/01/25 04:22

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

HTML

1<div class="wrap"> 2 <div class="js-ticker"> 3 <ul> 4 <li>内容入ります。内容入ります。内容入ります。内容入ります。内容入ります。</li> 5 <li>内容入ります。内容入ります。内容入ります。内容入ります。内容入ります。</li> 6 <li>内容入ります。内容入ります。内容入ります。内容入ります。内容入ります。内容入ります。内容入ります。内容入ります。内容入ります。内容入ります。</li> 7 </ul> 8 </div> 9</div>

CSS

1.wrap { 2 overflow: hidden; 3 padding: 0.5rem 0.5rem 0; 4} 5.js-ticker { 6 position: relative; 7 width: 100%; 8} 9.js-ticker ul { 10 line-height: 1.5; 11 width: 100%; 12 position: relative; 13 display: flex; 14} 15.js-ticker ul li { 16 width: 100%; 17 padding: 0; 18 display: none; 19}

jQuery

1$(window).on( 'load', function() { 2 var $setElm = $('.js-ticker'); 3 var effectSpeed = 1000; 4 var switchDelay = 5000; 5 var easing = 'swing'; 6 7 $setElm.each(function(){ 8 var $targetObj = $(this); 9 var $targetUl = $targetObj.children('ul'); 10 var $targetLi = $targetObj.find('li'); 11 var $setList = $targetObj.find('li:first'); 12 13 var ulWidth = $targetUl.width(); 14 var h = 0; 15 $targetLi.each(function(){ 16 if($(this).outerHeight() > h){ 17 h = $(this).outerHeight(); 18 } 19 }); 20 var listHeight = h; 21 $targetObj.css({height:(listHeight)}); 22 $targetLi.css({top:'0',left:'0',position:'absolute'}); 23 24 var liCont = $targetLi.length; 25 26 $setList.css({left:(ulWidth),display:'block',opacity:'0',zIndex:'98'}).stop().animate({left:'0',opacity:'1'},effectSpeed,easing).addClass('showlist'); 27 if(liCont > 1) { 28 setInterval(function(){ 29 var $activeShow = $targetObj.find('.showlist'); 30 $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'); 31 },switchDelay); 32 } 33 }); 34});

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問