我有一个div.content,里面有30个div(div.blocks)
我想制作一个动画div.blocks来到他们自己的位置.
例如:
CSS
.content{
position:absolute;
background:gray;
width:100%;
height:100%;
}
.blocks{
display:inline-block;
position:absolute;
background:wheat;
color:gray;
font-size:large;
width:50px;
height:50px;
margin-top:4px;
}
Run Code Online (Sandbox Code Playgroud)
HTML
<div class="content">
<div class="blocks" data-number="0">1</div>
<div class="blocks" data-number="1">2</div>
<div class="blocks" data-number="2">3</div>
<div class="blocks" data-number="3">4</div>
<div class="blocks" data-number="4">5</div>
<div class="blocks" data-number="5">6</div>
<div class="blocks" data-number="6">7</div>
<div class="blocks" data-number="7">8</div>
<div class="blocks" data-number="8">9</div>
<div class="blocks" data-number="9">10</div>
</div>
Run Code Online (Sandbox Code Playgroud)
jQuery的
$(function(){
// [0][0]==top
// [0][1]=right
var positions=[
[10,10],
[10,64],
[10,118],
[10,172],
[10,226],
[64,10],
[64,64],
[64,118],
[64,172],
[64,226]
];
$( …Run Code Online (Sandbox Code Playgroud)