Переместить случайным образом Элемент внутри Div

Question

Я сейчас работаю над новым сайтом, мне нужно перемещать случайный поток needs Actualy Я строю массив с их списком новостей. Массив перетасовывается и помещается в место ленты новостей.

Этот трюк работает хорошо, но я хочу добавить анимацию, эффект, чтобы показать движение элемента.

мой HTML, как показано ниже:

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

так это <a> элемент, который мне нужно анимировать внутри <div>

любая идея, как я могу это сделать?

Answer 1

Самый простой и наиболее распространенный способ создания простых анимаций - использование jQuery. Надеюсь, вы с ним знакомы, иначе посмотрите over here.

Я сделал a JSFiddle с моим решением вашей проблемы с большим количеством комментариев.

Что этот код в основном делает, это вычисление количества элементов, которые нужно переместить, а затем предоставления каждому элементу верхнего поля в случайном порядке. Сложная часть - отслеживание элементов, которым был присвоен верхний край, поэтому я нажимаю их id в массив.

Вы также должны знать, что я дал каждому элементу ссылку идентификатор, как это:

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

Все элементы ссылка должен иметь идентификатор подобное. Кроме того, все ссылки должны иметь атрибут display: block; в своем CSS. Надеюсь, вам понравится мое решение, удачи!