Slide Up and Fade Div continuously

Question

i want to make something like this https://muzzleapp.com/. I want the moving item in right part should be slide up and fade from bottom to top. Items should be moving continuously, so after the last div, it will start from beginning again. I have tried my own code. But stuck on starting from beginning point. It doesn't start properly from beginning.

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');

Aravind S · Accepted Answer

I updated your logic a little to handle the hide and show. Here is the updated preview 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');

Slide Up and Fade Div continuously

Answers (1)

Related Questions