Lower the margin by time when using slideToggle in Jquery

Question

I have this example

 $(document).ready(function() { $("#btn").click(function() { removeSecondContainer(); }); }); function removeSecondContainer() { var container = $("#c2"); container.slideToggle(500, function() { container.remove(); }); } 

 .container { margin: 20px auto; height: 20px; width: 100px; background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btn">Remove the second container</button> <div class="container" id="c1"> </div> <div class="container" id="c2"> </div> <div class="container" id="c3"> </div> 

As you can see, the process is not smooth at all. When the second container gets removed, the margin of the second container gets removed too. This causes a pull from the top.

How can I get this smoothly? I thought about lowering the margin by time to 0 when removing the container.

Answer 1

You are facing a margin collapsing issue. As you may notice you don't have 40px between each container like expected but only 20px.

As you can read here :

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

So when removing the element you decrease both margin at the top and bottom to leave the maring of the first and last element. And when the height of the element reaches 0 and get removed, you create another margin collapsing between the remaining block and thus the jump from 40px to 20px of margin.

---

And idea to avoid this is to increase height and use linear-gradient to color only the part you want (and leave transparent the part previously used for the margin). Like that the transition will go smoothly as there is no more margin issue.

 $(document).ready(function() { $("#btn").click(function() { removeSecondContainer(); }); }); function removeSecondContainer() { var container = $("#c2"); container.slideToggle(500, function() { container.remove(); }); } 

 .container { margin: auto; height: 60px; width: 100px; background: linear-gradient(to bottom, transparent 33.33%, red 33.33%, red 66.67%, transparent 66.67%);/ box-sizing: border-box; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btn">Remove the second container</button> <div class="container" id="c1"> </div> <div class="container" id="c2"> </div> <div class="container" id="c3"> </div> 

Or use flex by adding another container as there is no margin collpasing with flexbox ( Margin collapsing in flexbox ):

 $(document).ready(function() { $("#btn").click(function() { removeSecondContainer(); }); }); function removeSecondContainer() { var container = $("#c2"); container.slideToggle(500, function() { container.remove(); }); } 

 .box { display: flex; flex-direction: column; } .container { margin: 20px auto; height: 20px; width: 100px; background: red; box-sizing: border-box; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btn">Remove the second container</button> <div class="box"> <div class="container" id="c1"> </div> <div class="container" id="c2"> </div> <div class="container" id="c3"> </div> </div> 

Answer 2

Its due to clearing. The bottom margin is not working well with them. Either use float or remove margin-bottom or margin-top to 0

here is Example

edit: update with remove div https://jsfiddle.net/f5zw18er/3/

Answer 3

You could potentially use jQuery animate with a callback function. It's slightly different because it doesn't include the slide toggle, but in your example it's only being removed, so this could work.

Here we're removing the margin and also hiding the element with the animation, and then finally removing the element in the callback.

 $(document).ready(function() { $("#btn").click(function() { removeSecondContainer(); }); }); function removeSecondContainer() { var container = $("#c2"); container.animate({ 'margin' : '-20px auto', 'opacity': 0 }, 500, function(){ container.remove(); }); } 

 .container { margin: 20px auto; height: 20px; width: 100px; background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btn">Remove the second container</button> <div class="container" id="c1"> </div> <div class="container" id="c2"> </div> <div class="container" id="c3"> </div>