CODEWITHSUNDEEP
javascriptcss
user2607456
user2607456

Reputation: 159

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>

Demo

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 divs (after the box 30). And "mid box" must not be moving, it must be always at the center of the #main.

And in the demo you can see there are spaces, that boxes not fix. but don't need that spaces. I need all divs around "mid" box without spaces.

And all boxes must not be move out from the #main.

Upvotes: 0

Views: 451

Answers (1)

Nicklas Nygren
Nicklas Nygren

Reputation: 2605

Fiddle: http://jsfiddle.net/eUUpJ/5/

I see you've added jQuery to the fiddle, so I took the liberty of achieving this using 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/
It's a bit hackish, but works for the current example.

Upvotes: 1

Related Questions