jquery - 编辑引导栏时动画缓慢

在调整了列的大小之后，在具有Bootstrap的页面中，我希望以“慢速”模式重置列。
我有一个这样建立的网站：


答：col-md-2
B：col-md-10
C：col-md-10
D：col-md-7（C的子代）
E：col-md-3（C的子代）




开始时，事件B的宽度变为E



并使用：

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

现在，div“ D”将带您快速到达页面顶部


我没有找到任何方法可以减慢最后一步。你能帮助我吗？

最佳答案

所以我试图用小提琴来制作它，因为它是一个小的简单布局

首先，如果您detach将B直接添加到C上，则会遇到两个问题：


B仍然具有col-md-10，因此宽度将与E相同，因此您需要在append之前更改宽度
AppendTo将元素（B）添加到div（C）的末尾，因此将其放置在其他两个元素（D和E）的下面，您将不会获得预期的结果


所以：


使用prependTo而不是appendTo将元素添加到开头（http://api.jquery.com/prependto/）
将B的width更改为与E相同
float : right B


对于animation部分：

您可以在B上添加margin-right: 1px，以防止D立即出现
然后将D动画到顶部
完成后，重置B的margin和D的top的值

像这样：

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});
    });

这是一个玩弄的小提琴：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>

我希望这对您有帮助，或至少会给您一个思路，但是下次您发布问题时，请考虑提供您的代码或至少提供一个jsFiddle示例，以便获得准确的答案。