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函数中使用它。

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

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

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

1 个答案: