Slow animation when edit bootstrap column

Question

in a page with Bootstrap after resizing a column I would like the columns to be reset in "slow" mode. I have a site built this way:

• A: col-md-2
• B: col-md-10
• C: col-md-10
• D: col-md-7 (child of C)
• E: col-md-3 (child of C)

When start my event B width becomes like E

And use:

$("B").detach().prependTo("C");

Now the div "D" takes you to the top of the page very quickly

I did not find any way to slow down this last step. Can you help me?

Answer 1

so i tried to produce this in a fiddle since it's a small simple layout

First of all if you detach the B and append it to the C directly, you'll have two problems :

• the B still have col-md-10 so it won't have the same width as the E and you need to change that before the append
• AppendTo adds the element ( B ) to the end of the div ( C ) so it will be placed under the two others ( D and E ) and you won't have the desired results

so :

• use prependTo instead of appendTo to have the element added to the begining ( http://api.jquery.com/prependto/ )
• change the width of the B to be the same as the E
• float : right the B

and for the animation part :

you can add margin-right: 1px to the B to prevent the D from coming up right away then animate the D to the top and when it's all done, reset the values of B's margin and D's top

like so :

var bHeight = $('#b').height(); // keep the height of the B to use it when animating the D to the top

   $('#b').detach().prependTo('#c').css({
        'width' : '33.33%', // same as E
        'margin-right': '1px' // to prevent D from coming up right away         
    });

    $('#d').animate({
        top : - bHeight + 'px' // move the D to the top
    }, 500, function(){
        // reset teh values
        // if you had theses values before, keep them in variables and reset them here
        $('#b').css({'margin-right' : 0});
        $('#d').css({top : 0});
    });

here's a fiddle to play around with : https://jsfiddle.net/1uaw304o/54/

setTimeout(function(){
	
    var bHeight = $('#b').height(); // keep the height of the B to use it when animating the D to the top
    
   $('#b').detach().prependTo('#c').css({
   		'width' : '33.33%', // same as E
   		'margin-right': '1px' // to prevent D from coming up right away         
    });
    
    $('#d').animate({
    	top : - bHeight + 'px' // move the D to the top
    }, 500, function(){
     	// reset teh values
        // if you had theses values before, keep them in variables and reset them here
    	$('#b').css({'margin-right' : 0});
        $('#d').css({top : 0});
    });
   
}, 500);

div{
    padding: 0;
}
#a{
    background: red;
    height: 300px;
}
#b{
    background: blue;
    height: 150px;
    float: right;
}
#c{
    background: gray;    
    padding: 0;
}
#d{
    background: lightblue;
    height: 150px;
    position: relative;
}
#e{
    background: yellow;
    height: 150px;
    float: right;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-xs-2" id="a">
A
</div>
<div class="col-xs-10" id="b">
B
</div>
<div class="col-xs-10" id="c">
    <div class="col-xs-8" id="d">
    D
    </div>
    <div class="col-xs-4" id="e">
    E
    </div>
</div>

i hope this helps or at least gives you an idea on where to go, but please next time you post a question consider providing your code or at least a jsFiddle with an example so you can get precise answers .