Move randomly Item inside Div

Question

I'm curently working on a new site, An I need to move randomly the neews feed Actualy I build an Array with thes news list. The array is shuffled and put at the place of the news feed.

This trick work well, but i want to add some animation, effect to show the item move.

my HTML is like below :

<div class="wrapper">
   <a href="...">news content</a>
   <a href="...">news content</a>
   <a href="...">news content</a>
</div>

so it's the <a> element that i need to animate inside the <div>

any idea of how can I do that ?

Answer 1

The easiest and most common way of making simple animations is using jQuery. I hope you're familiar with it, otherwise take a look over here .

I've made a JSFiddle with my solution to your problem with lots of comments.

What that code basically does is calculating the amount of elements that should be moved and then giving every element a top margin in a random order. The tricky part is keeping track of the elements that have been given a top margin, so I'm pushing their id's into an array.

You should also be aware that I've given every link element an id like this:

<div class="wrapper">
    <a id="1">news content 1</a>
    <a id="2">news content 2</a>
    <a id="3">news content 3</a>
    <a id="4">news content 4</a>
    etc...
</div>

All link elements must have an id like that. Also, all links should have the display: block; attribute in their CSS. I hope you like my solution, good luck!