How to hide single div at a time without flashing rather setting visibility hidden

i want to hide a single div at a time so that below flashing can be avoided(shown in image)

NOTE: i cannot use visibility:hidden or visibility:show or $sel.css('visibility','hidden'); or $sel.css('visibility','show');

below is my code which should work with display:none or $el.hide()/$el.show():

#Snippet1

$(function() {
  var pos = 1;
  var ii = 0;

  var centerbandTop = $('.center-band').offset().top;
  var centerbandBottom = $('.center-band').outerHeight() + centerbandTop;
  $('.contents').hide();
  var intId = setInterval(function() {
    ii++;
    pos = -ii;
    //console.log(pos);
    //if (pos )
    $('.contents').each(function() {
      var $content = $(this);
      var contentTop = $content.offset().top;
      var contentBottom = $content.outerHeight() + contentTop;
      
     $content.hide();
      
      //console.log($content.position().top, centerbandTop, contentBottom);
      if (centerbandBottom > contentTop && centerbandTop < contentBottom)
        $content.show();
    });

    $('.container').css({
      // '-webkit-transform' : 'translate(0,' + pos + ')',
      transform: 'translateY(' + pos + 'px)'
    });

  }, 100);
});

.container{
   width: 100%;
    height: 100%;
    background: #000000d6;
    font-size: 19px;
    color: #a19999;
    position: relative;
}

.contents{
    margin-bottom: 15px;
    border-bottom: 1px solid #424242;
    padding: 20px;
    visibility: hidden;
}

.center-band{
    width: 98%;
    height: 78px;
    z-index: 200;
    background: #b4b1b147;
    position: fixed;
    top: 50%;
}

.wrapper{
  position: relative;
}

.over{
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="container">
      <div class="contents"> (1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
      <div class="contents">(2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, distinctio temporibus facere, laboriosam doloribus error quaerat ipsa, non nobis rerum mollitia quibusdam quas illo a qui consequuntur consectetur deleniti saepe.</div>
      <div class="contents">(3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sed, atque. Adipisci quasi debitis, soluta praesentium distinctio impedit veritatis officia molestias culpa fuga excepturi voluptates suscipit aliquam ea unde, non!</div>
      <div class="contents">(4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, incidunt, harum. Perferendis ipsum, molestias nihil sequi nam nulla, aliquid ipsa numquam cum! Perferendis ut voluptates hic excepturi dolores, ipsum impedit.</div>
      <div class="contents">(5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque debitis voluptates, reiciendis dolorum, labore eius. Illum similique ex, iusto rerum ratione minima, corporis aspernatur aliquam, itaque numquam sint enim!</div>
      <div class="contents">(6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.</div>
      <div class="contents">(7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quos atque enim, alias culpa quibusdam ratione, beatae non possimus, velit eaque. Optio qui saepe, earum harum beatae maxime obcaecati minima.</div>
      <div class="contents">(8) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id incidunt sapiente, magni, sequi ea molestiae iure maxime delectus doloribus error assumenda veritatis maiores saepe nihil neque autem similique obcaecati!</div>
      <div class="contents">(9) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum velit hic iure nam nulla natus corrupti eveniet, suscipit voluptates nostrum. Cupiditate vero ipsam alias fuga, magnam voluptas deserunt corporis non!</div>
      <div class="contents">(10) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatibus accusamus pariatur? Ipsum nobis ratione fuga, voluptates quam placeat officia odit eveniet aliquam, eaque quisquam tenetur! Exercitationem maxime vel quas!</div>

    </div>
    <div class="center-band"> </div>
  </div>

Question: Above snippet(#snippet1) should work as same as below(#snippet2) one but without using visibility(#snippet2 Working without flashing)

#snippet2

$(function() {
  var pos = 1;
  var ii = 0;

  var centerbandTop = $('.center-band').offset().top;
  var centerbandBottom = $('.center-band').outerHeight() + centerbandTop;

  var intId = setInterval(function() {
    ii++;
    pos = -ii;
    //console.log(pos);
    //if (pos )
    $('.contents').each(function() {
      var $content = $(this);
      var contentTop = $content.offset().top;
      var contentBottom = $content.outerHeight() + contentTop;
      
      $content.css('visibility', 'hidden');
      
      //console.log($content.position().top, centerbandTop, contentBottom);
      if (centerbandBottom > contentTop && centerbandTop < contentBottom)
        $content.css('visibility', 'visible');
    });

    $('.container').css({
      // '-webkit-transform' : 'translate(0,' + pos + ')',
      transform: 'translateY(' + pos + 'px)'
    });

  }, 100);
});

/* Styles go here */

.container{
   width: 100%;
    height: 100%;
    background: #000000d6;
    font-size: 19px;
    color: #a19999;
    position: relative;
}

.contents{
    margin-bottom: 15px;
    border-bottom: 1px solid #424242;
    padding: 20px;
    visibility: hidden;
}

.center-band{
    width: 98%;
    height: 78px;
    z-index: 200;
    background: #b4b1b147;
    position: fixed;
    top: 50%;
}

.wrapper{
  position: relative;
}

.over{
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="wrapper">
    <div class="container">
      <div class="contents"> (1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
      <div class="contents">(2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, distinctio temporibus facere, laboriosam doloribus error quaerat ipsa, non nobis rerum mollitia quibusdam quas illo a qui consequuntur consectetur deleniti saepe.</div>
      <div class="contents">(3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sed, atque. Adipisci quasi debitis, soluta praesentium distinctio impedit veritatis officia molestias culpa fuga excepturi voluptates suscipit aliquam ea unde, non!</div>
      <div class="contents">(4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, incidunt, harum. Perferendis ipsum, molestias nihil sequi nam nulla, aliquid ipsa numquam cum! Perferendis ut voluptates hic excepturi dolores, ipsum impedit.</div>
      <div class="contents">(5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque debitis voluptates, reiciendis dolorum, labore eius. Illum similique ex, iusto rerum ratione minima, corporis aspernatur aliquam, itaque numquam sint enim!</div>
      <div class="contents">(6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.</div>
      <div class="contents">(7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quos atque enim, alias culpa quibusdam ratione, beatae non possimus, velit eaque. Optio qui saepe, earum harum beatae maxime obcaecati minima.</div>
      <div class="contents">(8) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id incidunt sapiente, magni, sequi ea molestiae iure maxime delectus doloribus error assumenda veritatis maiores saepe nihil neque autem similique obcaecati!</div>
      <div class="contents">(9) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum velit hic iure nam nulla natus corrupti eveniet, suscipit voluptates nostrum. Cupiditate vero ipsam alias fuga, magnam voluptas deserunt corporis non!</div>
      <div class="contents">(10) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatibus accusamus pariatur? Ipsum nobis ratione fuga, voluptates quam placeat officia odit eveniet aliquam, eaque quisquam tenetur! Exercitationem maxime vel quas!</div>

    </div>
    <div class="center-band"> </div>
  </div>

Please help me thanks in advance!!!

from How to hide single div at a time without flashing rather setting visibility hidden