Slide Up and Fade Div continuously

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP


Slide Up and Fade Div continuously



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


<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>





Please share your HTML and a code snippet of what you tried
– Aravind S
36 mins ago





@AravindS i have updated with html. kindly check
– WahidSherief
7 mins ago





Define «start properly»....
– Louys Patrice Bessette
4 mins ago









By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

C# - How to create a semi transparent or blurred backcolor on windows form

Will Oldham

Makefile test if variable is not empty