[英]Move randomly Item inside Div
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 : 我的HTML如下所示:
<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>
所以这是我需要在
<div>
内部进行动画处理的<a>
元素
any idea of how can I do that ? 我该怎么办?
The easiest and most common way of making simple animations is using jQuery. 制作简单动画的最简单,最常见的方法是使用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. 我用很多评论对您的问题的解决方案做了一个JSFiddle 。
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.
棘手的部分是跟踪已获得最高边距的元素,因此我将其ID推送到数组中。
You should also be aware that I've given every link element an id like this: 您还应该注意,我已经为每个链接元素赋予了一个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>
All link elements must have an id like that. 所有链接元素都必须具有这样的ID。 Also, all links should have the
display: block;
另外,所有链接都应具有
display: block;
attribute in their CSS. 属性在其CSS中。 I hope you like my solution, good luck!
希望您喜欢我的解决方案,祝您好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.