Question

我试图找出如何为堆叠元素的高度设置动画，如下例所示：http://jsfiddle.net/QtrDj/没有＆＃34;振动＆＃34;在底部。

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

我猜问题是在动画期间的某个时刻，计算出的值会变小或变小。

我可以使用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;
});

谢谢，诺贝特

Answer 1

你可以用一个坚实的蓝色div作为背景来伪造它。然后在顶部div上使用border-bottom，使它们看起来像单独的div。这将允许“振动”。没有它在视觉上明显

试试这个JSFiddle

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>

<强> CSS

.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; }

<强> JS

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;
    });

});

Answer 2

我不确定你是否可以阻止它，除非你想自己重写整个动画代码。我已经使用css过渡和事件监听器重写了代码，并且它做了相同的

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

喜欢这里：

http://jsfiddle.net/pH5r2/

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

2 个答案: