[英]Animate DIVs hide and show
<script>
function hideBox(num, perc) {
if(perc == undefined)
perc = 100;
if(perc-- > 0)
setTimeout(function(){
document.getElementById('box'+num).style.width = perc + 'px';
hideBox(num,perc);
}, 1);
else
document.getElementById('box'+num).style.display = 'none';
}
</script>
<div id="main">
<div class="box" id="box1" onclick="hideBox(1)">Box 1</div>
<div class="box" id="box2" onclick="hideBox(2)">Box 2</div>
<div class="box" id="box3" onclick="hideBox(3)">Box 3</div>
<div class="box" id="box4" onclick="hideBox(4)">Box 4</div>
<div class="box" id="box5" onclick="hideBox(5)">Box 5</div>
<div class="box" id="box6" onclick="hideBox(6)">Box 6</div>
<div class="box" id="box7" onclick="hideBox(7)">Box 7</div>
<div class="box" id="box8" onclick="hideBox(8)">Box 8</div>
<div class="box" id="box9" onclick="hideBox(9)">Box 9</div>
<div class="box" id="box10" onclick="hideBox(10)">Box 10</div>
<div class="box" id="box11" onclick="hideBox(11)">Box 11</div>
<div class="box" id="box12" onclick="hideBox(12)">Box 12</div>
<div class="box" id="box13" onclick="hideBox(13)">Box 13</div>
<div class="box" id="box14" onclick="hideBox(14)">Box 14</div>
<div class="mid" id="mid" >Box mid</div>
<div class="box" id="box15" onclick="hideBox(15)">Box 15</div>
<div class="box" id="box16" onclick="hideBox(16)">Box 16</div>
<div class="box" id="box17" onclick="hideBox(17)">Box 17</div>
<div class="box" id="box18" onclick="hideBox(18)">Box 18</div>
<div class="box" id="box19" onclick="hideBox(19)">Box 19</div>
<div class="box" id="box20" onclick="hideBox(20)">Box 20</div>
<div class="box" id="box21" onclick="hideBox(21)">Box 21</div>
<div class="box" id="box22" onclick="hideBox(22)">Box 22</div>
<div class="box" id="box23" onclick="hideBox(23)">Box 23</div>
<div class="box" id="box24" onclick="hideBox(24)">Box 24</div>
<div class="box" id="box25" onclick="hideBox(25)">Box 25</div>
<div class="box" id="box26" onclick="hideBox(26)">Box 26</div>
<div class="box" id="box27" onclick="hideBox(27)">Box 27</div>
<div class="box" id="box28" onclick="hideBox(28)">Box 28</div>
<div class="box" id="box29" onclick="hideBox(29)">Box 29</div>
<div class="box" id="box30" onclick="hideBox(30)">Box 30</div>
</div>
In the above demo, you can see, when I click box it hide. 在上面的演示中,您可以看到,当我单击框时它会隐藏。 And you can see the "mid box" is moving forward.
您会看到“中间框”正在向前发展。
But I need, when I click on box, it must be hide and appear at the end of the div
s (after the box 30). 但是我需要,当我单击框时,它必须是隐藏的并显示在
div
的末尾(在框30之后)。 And "mid box" must not be moving, it must be always at the center of the #main
. 而且“中间框”一定不能移动,它必须始终位于
#main
的中心。
And in the demo you can see there are spaces, that boxes not fix. 在演示中,您可以看到有一些空格无法固定。 but don't need that spaces.
但不需要空格。 I need all
div
s around "mid" box without spaces. 我需要“
div
”框周围没有空格的所有div
。
And all boxes must not be move out from the #main
. 并且所有盒子都不得从
#main
。
Fiddle: http://jsfiddle.net/eUUpJ/5/ 小提琴: http : //jsfiddle.net/eUUpJ/5/
I see you've added jQuery to the fiddle, so I took the liberty of achieving this using jQuery: 我看到您已经将jQuery添加到了小提琴中,所以我选择了使用jQuery实现这一目标的自由:
$('.box').click(function () {
var $main = $('#main'),
$mid = $('#mid'),
$this = $(this);
$this.fadeOut(function () {
$this.appendTo($main).show();
$mid.insertAfter($main.children()[$mid.index() + 1]);
});
});
EDIT: check this updated fiddle: http://jsfiddle.net/eUUpJ/11/ 编辑:检查此更新的小提琴: http : //jsfiddle.net/eUUpJ/11/
It's a bit hackish, but works for the current example. 有点黑,但适用于当前示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.