Question

在调整列大小后的Bootstrap页面中我希望列中的列重置为＆＃34;慢＆＃34;模式。我有一个以这种方式构建的网站：

A：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＆＃34; D＆＃34;将您带到页面顶部非常快速

我没有找到任何减缓这最后一步的方法。你能救我吗？

Answer 1

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

首先，如果您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部分：

您可以将margin-right: 1px添加到B以防止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的示例，以便您可以获得准确的答案。

编辑bootstrap列时动画慢

1 个答案: