jquery - 编辑 Bootstrap 列时动画缓慢

Question

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

• 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 “D” 会很快将您带到页面顶部

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

Answer 1

所以我试图在 fiddle 中制作它，因为它是一个简单的小布局

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

对于动画部分:

你可以给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});
    });

这里有一个可以玩的 fiddle :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，以便您可以获得准确的答案。