Divs moving when doing animations with jQuery

Question

I'm having a trouble when trying basic jquery animations (sliding, fading...) on a div by pushing a button, the issue is that when I push it the div does the animation (for example it slides up) and when it hides up the other divs are repositioned to fill the space where the other div was, what's the issue with my code? Is this normal when applying animations on jquery? Thanks :)

<body>
<h1>jQuery Test 01</h1>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script>
    $(function() {

        $('.button1').html('<p>button 1</p>');
        $('.button2').html('<p>button 2 </p>');
        $('.button3').html('<p>button 3 </p>');
        $('.button4').html('<p>button 4 </p>');
        $('.button5').html('<p>button 5 </p>');
        $('.button6').html('<p>button 6 </p>');
        $('.button1').on('click', function() {
            $('.div1').slideToggle();
        });
        $('.button2').on('click', function() {
            $('.div2').slideToggle();
        });
        $('.button3').on('click', function() {
            $('.div3').slideToggle();
        });
        $('.button4').on('click', function() {
            $('.div4').slideToggle();
        });
        $('.button5').on('click', function() {
            $('.div5').slideToggle();
        });
        $('.button6').on('click', function() {
            $('.div6').slideToggle();
        });
    });
</script>

JSFiddle: http://jsfiddle.net/42knLk1n/30/

possible duplicate of [jQuery, hide a div without disturbing the rest of the page](http://stackoverflow.com/questions/6324957/jquery-hide-a-div-without-disturbing-the-rest-of-the-page) — showdev, Oct 22 '14 at 21:29
This is normal for jQuery because they use display: none. Use visibility: hidden; to hide an element and mantain there space. — Wezelkrozum, Oct 22 '14 at 21:34
Yes, I can use $('.div1').css('visibility','hidden') and $('.div1').slideToggle(); but then when I click the div disappears without sliding up, is there anyway to maintain the 6 divs floating, sliding up and not moving anywhere else? Thanks:) — Raúl García, Oct 23 '14 at 11:26

score 0 · Accepted Answer · answered Oct 22 '14 at 21:37

0

The div tags are changing position because you are floating them. If you want them to be fixed in a spot, use absolute positioning or relative position to set them where they are suppose to be.

answered Oct 22 '14 at 21:37

user2671355

322
2
3
10

I understand... But if I needed to float them, can I make em stay in their place and don't move when one slides up or fades? Thanks – Raúl García Oct 23 '14 at 11:33
Not if you're going to use JQuery slideToogle. The rest is that slideToogle sets the display to none meaning that you are destroying the element and freeing up the space that it took. You could change the visibility to hidden which will hidden it but keep the space occupied. However, you're going to have to change you javascript some to better fit your custom needs. – user2671355 Oct 23 '14 at 15:24

Divs moving when doing animations with jQuery

1 Answers1