javascriptで要素の表示非表示を交互に行う

・html
<div class="information">

  <div class="post">
    <div class="post-date">2017.8.14</div>
    <div class="post-title">記事のタイトル1</div>
  </div>

  <div class="post">
    <div class="post-date">2017.9.24</div>
    <div class="post-title">記事のタイトル2</div>
  </div>

</div>
・css
.information{
  width: 360px;
  height: 40px;
  margin: 300px;
  position: relative;
  background-color: #b57f18
}

.post{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0,-50%);
  opacity: 0;
  white-space: nowrap;
  transition-duration: 3s;
}

.post.active{
  opacity: 1
}

.post-date,
.post-title{
  display: inline-block;
}
・script
$(function(){
  var ticker = $('.information');
  var li = ticker.children('.post');
  var i = 0;
  add();
  function add(){
    console.log(i)
    li.removeClass('active');
    li.eq(i).addClass('active');
    i++;
    if(i == li.length){
      i = 0;
    }
  }
  setInterval(function(){
    add();
  },3000);
})

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です