横スライドの中身が枠外でも表示されてしまう

前提・実現したいこと

横スライドで更新情報等が表示されるboxを作成しています。
最大5件の更新情報を一つずつ右から左へ流していきます。

更新情報を繰り返しスライドで表示させることはできたのですが、更新情報のboxの外に流れたときにも文字が見えてしまいます。

緑の枠が更新情報のboxです。
理想は右から流れて入ってきて、左へ流れて出ていくけど、枠外では文字は見えないというかたちです。
実現するにはどうしたらよいですか？

該当のソースコード

html
1<div class="announce_box">
2	<ul>
3		<li class="announce_1">
4			<span class="announce_date">20/03/01</span>更新情報1
5		</li>
6		<li class="announce_2">
7			<span class="announce_date">20/03/02</span>更新情報2
8		</li>
9		<li class="announce_3">
10			<span class="announce_date">20/03/03</span>更新情報3
11		</li>
12		<li class="announce_4">
13			<span class="announce_date">20/03/04</span>更新情報4
14		</li>
15		<li class="announce_5">
16			<span class="announce_date">20/03/05</span>更新情報5
17		</li>
18	</ul>
19</div>

scss
1.header-announce {
2	width: 100%;
3	height: 80px;
4	margin: 2rem auto;
5	padding: 2.5rem 1rem;
6		
7	ul {
8		list-style: none;
9		margin: 0;
10		padding: 0;
11		position: relative;
12		width: 100%;
13		li{
14			display: flex;
15			opacity: 0;
16			position: absolute;
17			span {
18				padding-right: 5px;
19			}
20		}
21	}
22}

javascript
1var $setElm = $('.header-announce'),
2	fadeSpeed = 1000,
3	switchDelay = 5000;
4	
5$setElm.each(function(){
6	var targetObj = $(this);
7	var findUl = targetObj.find('ul');
8	var findLi = targetObj.find('li');
9	var findLiFirst = targetObj.find('li:first');
10		
11	findLi.css({'opacity':'1','left':'150%'});
12	findLiFirst.stop().animate({'left': '0'},fadeSpeed);
13			
14	setInterval(function(){
15		findUl.find('li:first-child')
16			.animate({'left': '-150%'},fadeSpeed).animate({'left': '150%'},0)
17			.next('li').animate({'left': '0'},fadeSpeed)
18			.end().appendTo(findUl);
19	},switchDelay);
20});

試したこと

◎.announce_boxやulにoverflow:hiddenを追加してみたら、枠内でもテキストが消えてしまいました。
◎findLi.css({'opacity':'1','left':'150%'});のopacityを0にして、left:150%から0になる間と0から-150%になる間に.animate({'opacity': '1'},0)を、left-150%から150%になる間に.animate({'opacity': '0'},0)追加してみましたが、挙動に変わりはありませんでした。

現状、cssで対応すべきかjsで対応すべきかもわかっていない状態です。
ご教授いただけましたら幸いです。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

.announce_box の親要素 .header-announce に対して overflow: hidden を設定することで質問者さんの問題は解決します (動作確認用リンク)。

HTML
1<div class="header-announce">
2  <div class="announce_box">
3    <ul>
4      <li class="announce_1">
5        <span class="announce_date">20/03/01</span>更新情報1
6      </li>
7      <li class="announce_2">
8        <span class="announce_date">20/03/02</span>更新情報2
9      </li>
10      <li class="announce_3">
11        <span class="announce_date">20/03/03</span>更新情報3
12      </li>
13      <li class="announce_4">
14        <span class="announce_date">20/03/04</span>更新情報4
15      </li>
16      <li class="announce_5">
17        <span class="announce_date">20/03/05</span>更新情報5
18      </li>
19    </ul>
20  </div>
21</div>

SCSS
1* {
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5}
6
7.header-announce {
8    width: 100%;
9    height: 80px;
10    margin: 2rem auto;
11    padding: 2.5rem 1rem;
12    overflow: hidden;
13
14    ul {
15        list-style: none;
16        margin: 0;
17        padding: 0;
18        position: relative;
19        width: 100%;
20        li{
21            display: flex;
22            opacity: 0;
23            position: absolute;
24            span {
25                padding-right: 5px;
26            }
27        }
28    }
29}

jQuery
1var $setElm = $('.header-announce'),
2  fadeSpeed = 1000,
3  switchDelay = 5000;
4
5$setElm.each(function() {
6  var targetObj = $(this);
7  var findUl = targetObj.find('ul');
8  var findLi = targetObj.find('li');
9  var findLiFirst = targetObj.find('li:first');
10
11  findLi.css({
12    'opacity': '1',
13    'left': '150%'
14  });
15  findLiFirst.stop().animate({
16    'left': '0'
17  }, fadeSpeed);
18
19  setInterval(function() {
20    findUl.find('li:first-child')
21      .animate({
22        'left': '-150%'
23      }, fadeSpeed).animate({
24        'left': '150%'
25      }, 0)
26      .next('li').animate({
27        'left': '0'
28      }, fadeSpeed)
29      .end().appendTo(findUl);
30  }, switchDelay);
31});