在Div内随机移动物品

Question

我目前正在一个新的网站上工作，我需要随机移动新种子供稿。实际上，我用新闻列表构建了一个数组。 将该数组改组并放在新闻提要的位置。

这个技巧效果很好，但是我想添加一些动画效果来显示项目移动。

我的HTML如下所示：

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

所以这是我需要在<div>内部进行动画处理的<a>元素

我该怎么办？

Answer 1

制作简单动画的最简单，最常见的方法是使用jQuery。 希望您熟悉它，否则请在这里看看。

我用很多评论对您的问题的解决方案做了一个JSFiddle 。

该代码的基本作用是计算应移动的元素数量，然后以随机顺序为每个元素提供最高边距。 棘手的部分是跟踪已获得最高边距的元素，因此我将其ID推送到数组中。

您还应该注意，我已经为每个链接元素赋予了一个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>

所有链接元素都必须具有这样的ID。 另外，所有链接都应具有display: block; 属性在其CSS中。 希望您喜欢我的解决方案，祝您好运！