将动画浮动DIV重新定位为其他浮动DIV隐藏

Question

我有一系列浮动DIV，当用户点击时可能会隐藏（显示：无）。当其中一个被隐藏时，其他DIV“跳”填充它的位置（因为它们也是浮动的）。

但是，我希望他们顺利地“滑”到他们的新位置。做这个的最好方式是什么？我在下面包含了一个示例页面 - 如果将它转储到任何编辑器中，除了我要添加的功能（动画）之外，它是完全可用的。

function hideBox(num) { 
 
    document.getElementById('box' + num).style.display = 'none'; 
 
}

body { 
 
    padding: 25px; 
 
    margin: 0px; 
 
    font-family: Helvetica; 
 
    color: #333; 
 
    font-size: 18px; 
 
} 
 

 
div.box { 
 
    width: 100px; 
 
    height: 63px; 
 
    background-color: #52c6ec; 
 
    margin: 5px; 
 
    padding-top: 37px; 
 
    float: left; 
 
    text-align: center; 
 
    color: #fff; 
 
    font-weight: bold; 
 
}

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

Answer 1

对于一个更动画的版本，其中的框实际上是动画变化的行，这也会这样做：http://jsfiddle.net/rCgxD/1/。这个人也使用jQuery以及其强大的库和动画。以下是我使用的javascript代码：

$(function(){ 
    $('.box').click(function(){ 
     var boxpositions = []; 
     $('.box').not(this).each(function(index,elem){ 
      boxpositions[index] = [$(elem).position().top,$(elem).position().left]; 
     }); 
     var thisposition = [$(this).position().top,$(this).position().left]; 
     $(this).hide(); 
     var newpositions = []; 
     $('.box').not(this).each(function(index,elem){ 
      newpositions[index] = [$(elem).position().top,$(elem).position().left]; 
     }); 
     $(this).show().css({position:'absolute',top:thisposition[0],left:thisposition[1]}).hide(200); 
     $('.box').not(this).each(function(tindex,telem){ 
      $(telem).css({position:'absolute',top:boxpositions[tindex][0],left:boxpositions[tindex][1]}).animate({top:newpositions[tindex][0],left:newpositions[tindex][1]},200,function(){$(this).css({position:'static',top:'auto',left:'auto'});});; 
     }); 
    }); 
}); 

Answer 2

正如你必须在标签jQuery，你可以做最简单的事情是用.hide()

你甚至都不需要添加所有这些onclick处理程序在你的HTML代码，简单地使用：

$('.box').click(function(){ 
$(this).hide(200); //change width,height and opacity to 0 in 200miliseconds 
}); 

DEMO。

但是，如果你想要一个免费的图书馆解决方案，下面是一个快速递归之一：

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'; 
} 

DEMO

Answer 3

使用香草的Javascript，这将是困难的（和广泛的），但使用jQuery你已标记它是那样简单

$(".box").click(function() 
{ 
    $(this).hide(400); 
}); 

其中400毫秒，其动画运行的数量。