jQuery在堆叠元素上同时设置高度动画

我试图找出如何设置堆叠元素高度的动画，如本例所示：底部没有“振动”

单击红色条时，您会看到底部蓝色条的底部没有固定。我想动画的是两个元素的高度，但不改变它们的高度之和

我想问题在于，在动画过程中的某个时刻，计算出的值会舍入为较小/较大的值

我可以用jQuery防止这种情况吗

我发现了其他关于同步动画的问题，他们都说队列，但实际上我在寻找其他的东西，不仅是同步的，还有额外的约束。这就是我所尝试的：

var one = jQuery(".one").animate({
    height: equal ? 50 : 150
}, {
    queue: false
}).promise();

var two = jQuery(".two").animate({
    height: equal ? 150 : 50
}, {
    queue: false
}).promise();

jQuery.when(one, two).done(function () {
    equal = !equal;
});

谢谢，

---

诺伯特

你可以用一个纯蓝色的div作为背景来伪装它。然后在顶部div上使用边框底部，使它们看起来像单独的div。这将允许“振动”，而不使其在视觉上明显可见

试试这个

HTML

<div class="container">
    <div class="bar red">Click me</div>
    <div class="stack-container">
        <div class="stacked-bar blue one"></div>
        <div class="stacked-bar blue two"></div>
    </div>
</div>
<p>Click the red bar</p>

JS

.container { width: 108px; font-size: 0; }

.bar{
    display: inline-block;
    width: 50px;
    margin: 2px;
}
.stack-container{
    display:inline-block;
    width:50px;
    float:left;
    margin:2px;
    background:black;
    height:204px;
}

.bar { height: 204px; float: left; }
.stacked-bar { 
    display: inline-block;
    width: 50px;
    height: 100px; 
}
.one{
    border-bottom:4px solid white;
}
.red { background-color: red; }
.blue { background-color: blue; }

var equal = true;

jQuery(".red").on("click", function () {
    "use strict";

    var one = jQuery(".one").animate({
        height: equal ? 50 : 150
    }, {
        queue: false
    }).promise();

    var two = jQuery(".two").animate({
        height: equal ? 150 : 50
    }, {
        queue: false
    }).promise();

    jQuery.when(one, two).done(function () {
        equal = !equal;
    });

});

---

我不确定你是否能阻止它，除非你想自己重写整个动画代码。我已经使用css转换和事件侦听器重写了代码，它也做了同样的事情

jQuery(".one").on( 
     'webkitTransitionEnd', 
     function( event ) { 
         equal = !equal;
         alert( "Finished transition!" ); 
     } );

就像这里：

---

谢谢。我接受你的解决方案，因为它解决了问题，但我认为我不会使用它。我真的反对任何只为设计而涉及“让我们引入另一个元素”的黑客行为：）@norbertk完全理解，如果你担心在HTML中添加DOM元素，你可以考虑使用类似于

：after

或

：before

的方法在CSS中添加伪元素来做同样的事情？