0 
<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>

演示

在上面的演示中，您可以看到，当我单击框时，它会隐藏。你可以看到“中间盒子”正在向前发展。

但是我需要，当我单击框时，它必须隐藏并出现在divs 的末尾（框 30 之后）。并且“中间框”不能移动，它必须始终位于#main.

在演示中，您可以看到有空格，该框无法修复。但不需要那个空间。我需要div围绕“中间”框的所有 s 没有空格。

并且所有箱子都不能从#main.

4

1 回答 1

1

小提琴：http: //jsfiddle.net/eUUpJ/5/

我看到你已经在小提琴中添加了 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]);
    });
});

编辑：检查这个更新的小提琴： http: //jsfiddle.net/eUUpJ/11/
这有点hackish，但适用于当前示例。

于 2013-08-10T12:40:19.853 回答