レスポンシブ対応の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});
あなたの回答
tips
プレビュー