我有一系列浮动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>
答案 0 :(得分:4)
对于一个更动画的版本,其中框实际上为行的更改设置了动画,这也可以执行此操作: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'});});;
});
});
});
答案 1 :(得分:2)
由于标签中有jQuery
,您可以做的最简单的事情就是使用.hide()
您甚至无需在onclick
代码中添加所有这些HTML
处理程序,只需使用:
$('.box').click(function(){
$(this).hide(200); //change width,height and opacity to 0 in 200miliseconds
});
但是,如果你想要一个免费的解决方案,这里有一个快速的递归解决方案:
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';
}
答案 2 :(得分:0)
使用vanilla Javascript这很困难(而且很广泛)但是使用jQuery,因为你已经标记了它就像
一样简单$(".box").click(function()
{
$(this).hide(400);
});
其中400是动画运行的毫秒数。