Jquery 编辑引导列时动画速度慢

在一个带有引导的页面中，在调整列的大小后，我希望列在“慢速”模式下重置。 我有一个这样的网站：

• 答：

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

---

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

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

首先，如果拆下B并将其直接附加到C，将出现两个问题：

• B仍然有

  col-md-10

  ，因此它的宽度不会与E相同，您需要在

  append

• AppendTo

  将元素（B）添加到div（C）的末尾，因此它将被放置在其他两个元素（D和E）之下，您将不会得到所需的结果

因此：

• 使用

  prependTo

  而不是

  appendTo

  将元素添加到起始（）
• 将B的

  宽度

  更改为与E相同

• float:right

  B

对于

动画

部分：

您可以向B添加

右边距：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});
    });

这里有一把小提琴可以玩：

setTimeout（函数（）{
var bHeight=$（'#b'）.height（）；//在将D设置为顶部动画时，保留b的高度以使用它
$（'#b'）.detach（）.prependTo（'#c'）.css({
“宽度”：33.33%，//与E相同
“右边距”：“1px”//防止D立即出现
});
$（'#d'）。设置动画({
top:-bHeight+‘px’//将D移到顶部
}，500，函数（）{
//重置值
//如果您以前有这些值，请将它们保存在变量中并在此处重置
$（'#b'）.css（{'margin-right'：0}）；
$（'#d'）.css（{top:0}）；
});
}, 500);
div{
填充：0；
}
#a{
背景：红色；
高度：300px；
}
#b{
背景：蓝色；
高度：150像素；
浮动：对；
}
#c{
背景：灰色；
填充：0；
}
#d{
背景：浅蓝色；
高度：150像素；
位置：相对位置；
}
#e{
背景：黄色；
高度：150像素；
浮动：对；
}

A.
B
D
E
还有你的代码？你能提供一个代码示例以便我们重新创建提供的示例吗？添加代码片段以便我们可以编辑你的代码。你好，我注意到你改变了接受答案的想法，我想知道为什么。。