javascript - 连续向上滑动和淡出 Div

Question

我想做这样的东西https://muzzleapp.com/。我希望右侧的移动项目应该向上滑动并从下到上淡出。项目应该是连续移动的，所以在最后一个 div 之后，它将重新开始。我已经尝试过我自己的代码。但坚持从起点开始。它没有从一开始就正确启动。

html

function moveItems(el) {
  var x = 1;
  var flag = 0;
  var elems = $(el).nextAll();
  count = elems.length;
  elems.each (function (i) {
    setTimeout(function() {
      if (x>1) { 
        y = x-1;
        $('#slider_'+y).show().delay(2000).slideUp().fadeOut();
      }							
      $('#slider_'+x).show().delay(2000).slideUp();
      x++;
      if (!--count) {
        setTimeout(function() {
        moveItems('.panel');
        }, 6000)
      }
    }, i*2000);
  })
}

moveItems('.panel');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id='slider_1'>
    <div class="panel-body">
    <div class="row">
        slider 1
      </div>
    </div>
</div>

<div class="panel" id='slider_2'>
    <div class="panel-body">
    <div class="row">
        slider 2
      </div>
    </div>
</div>

<div class="panel" id='slider_3'>
    <div class="panel-body">
    <div class="row">
        slider 3
      </div>
    </div>
</div>

标签： javascriptjquerycssjquery-ui

Answer 1

我稍微更新了你的逻辑来处理隐藏和显示。这是更新的预览https://jsfiddle.net/Aravi/hd465gpc/13/

function moveItems(el) {
  var elems = document.querySelectorAll(el);
  Array.from(elems).forEach((item,index) => {
    setTimeout(function() {
     index+=1;
     $('#slider_'+index).show().delay(2000).slideUp().fadeOut();
     if (index == elems.length) {
       setTimeout(function() {
		   for(j=1;j<= elems.length;j++){ $('#slider_'+j).show()}
           moveItems('.panel');
        }, 6000)
      }
      
    }, index*2000);
})
}

moveItems('.panel');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id='slider_1'>
    <div class="panel-body">
    <div class="row">
        slider 1
      </div>
    </div>
</div>

<div class="panel" id='slider_2'>
    <div class="panel-body">
    <div class="row">
        slider 2
      </div>
    </div>
</div>

<div class="panel" id='slider_3'>
    <div class="panel-body">
    <div class="row">
        slider 3
      </div>
    </div>
</div>

<div class="panel" id='slider_4'>
    <div class="panel-body">
    <div class="row">
        slider 4
      </div>
    </div>
</div>

<div class="panel" id='slider_5'>
        <div class="panel-body">
        <div class="row">
            slider 5
          </div>
        </div>
    </div>