Jquery向上滑动两个元素并在元素内向下滑动一个元素

Question

我在一个 div 中有 3 个 div 元素，我想使用 jquery 一次向上滑动 2 个元素并向下滑动 1 个元素。

html

<div class='container'>
    <div class='div1'></div>
    <div class='div2'></div>
    <div class='div3'></div>
</div>

css

.div1, .div2, .div3 {
    display: inline-block;
    width: 100px;
    height: 300px;
}

.div1 {
    background: red;
}

.div2 {
    background: blue;
}

.div3 {
    background: green;
}

jquery

$(document).ready(function() {
    $('.container')
      .children('.div1')
      .slideUp(2000)
      .end()
      .children('.div2')
      .animate({height:0},2000)
      .end()
      .children('.div3')
      .slideUp(2000);
})

jsfiddle demo

我希望第二个（div2）在中间，蓝色的一个滑动到底部，其他 div 向上滑动，我知道我不能使用 slideDown 因为它已经显示了，我想我必须使用动画，但我如何让它动画到底部？

*脚本必须以这种方式编写，因为我在 setInterval 函数中使用它。

有人可以帮我解决这个问题吗？ 欢迎所有建议。 提前谢谢

Answer 1

如果您相对或绝对定位 div，您可以同时为顶部和中间 div 的高度设置动画。

I have updated your fiddle.

JS：

$(document).ready(function() {
    $('.container')
      .children('.div1')
      .slideUp(2000)
      .end()
      .children('.div2')
      .animate({top: 300,height:0},2000)
      .end()
      .children('.div3')
      .slideUp(2000);
});

CSS：

.div1, .div2, .div3 {
    display: inline-block;
    width: 100px;
    height: 300px;
    position: absolute;
}

.div1 {
    background: red;
    left: 0px;
}

.div2 {
    background: blue;
    left: 100px;
    top: 0px;
}

.div3 {
    background: green;
    left: 200px;
}