编辑引导列时动画慢

Question

在调整列大小后使用 Bootstrap 的页面中，我希望在“慢”模式下重置列。 我有一个这样构建的网站：

• 答：col-md-2
• 乙：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" 会很快将您带到页面顶部

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

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 : rightB

对于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，以便您获得准确的答案。