时间戳

首页 > 解决方案 > 如何一次隐藏单个div而不闪烁而不是设置可见性隐藏

javascript - 如何一次隐藏单个div而不闪烁而不是设置可见性隐藏

问题描述

标签： javascriptjquerynode.js

解决方案

很难理解您的问题，但从您提供的代码片段看来，您需要从根本上重新考虑您的方法。

您的代码向上移动“容器”div，然后计算包含元素的位置，但问题是当您隐藏或显示一个元素时，所有其他元素都会响应移动。因此，当“内容 1”超过中心带并且您将其隐藏时，它会停止占用空间并且“内容 2”移动到“内容 1”所在的位置。但是，由于“内容 1”在中心带之上，现在“内容 2”在中心带之上，您也将隐藏它。因此，在您的代码中，只要“内容 1”超过中心带，所有内容都将被隐藏。

有很多方法可以解决这个问题，最适合您情况的方法可能取决于您真正想要完成的事情的细节，而这些细节从您的问题中不清楚。使用 CSSoverflow: hidden可能是最有效的，您并没有真正解释该解决方案有什么问题。

另一种选择是调整容器的位置以补偿隐藏元素。您还必须有一些方法来确定何时显示进入框的项目，您无法从它们的位置执行此操作，因为它们是隐藏的。这个片段并不理想，并且由于边距存在一些故障，但它显示了这个概念。

$(function() {
  var pos = 0;
  var showNext = false;

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

  var scroll = function() {
    pos--; // move the list up one pixel

    $('.contents').each(function() {
      var $content = $(this);
      // If the previous "contents" moved up enough
      // to make room for this hidden element, show it.
      if (showNext) {
        $content.show();
        showNext = false;
      } else if ($content.is(':hidden')) // nothing to do
        return;

      // We have to wait until after we have shown 
      // the element to compute its position.
      var contentTop = $content.offset().top;
      var contentBottom = $content.outerHeight() + contentTop;


      if (contentBottom < centerbandTop) {
        // If the element has exited the top of the
        // band, hide it, and move the container
        // down to compensate for removing this 
        // element.
        pos = pos + $content.outerHeight(true);
        $content.hide();
      } else if (contentTop > centerbandBottom) {
        // If the element is below the band,
        // hide it. Really this only needs to
        // be done the first time through.
        $content.hide();
      }
      // If there is room in the center band
      // below this element, show the next one
      showNext = contentBottom < centerbandBottom;
      $('.container').css({
        transform: 'translateY(' + pos + 'px)'
      });
    });


  }
  // We start with the contents "visibility: hidden"
  // and all the elements displayed so we do not 
  // see them but still can compute their positions.
  // One pass through scroll() then hides everything
  // that needs to be hidden.
  scroll();
  // Now we can make everthing visible
  $('.contents').css('visibility', 'visible');
  // And now we set up the scrolling timer
  var intId = setInterval(scroll, 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;
}
<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>

推荐阅读