I have a series of floating DIVs which may be hidden (display:none) when clicked by the user. When one is hidden, the other DIVs "jump" to fill it's place (as they are also floating). However, I would like them to smoothly "slide" into their new position. What is the best way to do this? I have included a sample page below - if you dump it into any editor it is fully functional except for the feature I am trying to add (the animation).Index.html:\[code\]<html><head> <title>Animated DIVs</title> <style> 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; } </style> <script> function hideBox(num) { document.getElementById('box'+num).style.display = 'none'; } </script></head><body> <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></body></html>\[/code\]Thank you in advance for any ideas! Please let me know if there is any further information that would be helpful in suggesting a solution.
Animate floating DIVs repositioning as other floating DIVs are hidden
- Thread starter myyrbank
- Start date