Jquery用于在一个元素内向上滑动两个元素，向下滑动一个元素

Jquery to slide up two elements and slide down one element inside an element

本文关键字：元素 一个 两个 用于 Jquery      更新时间：2023-09-26

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

<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演示

我想要第二个(div2)在中间，蓝色的那个滑动到底部，其他的div向上滑动，我知道我不能使用slideDown，因为它已经显示了，我想我必须使用animate，但是我怎么让它动画到底部呢?

*脚本必须这样写，因为我在setInterval函数中使用它。

有人能帮我解决这个问题吗?欢迎提出建议。提前致谢

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

我已经更新了你的小提琴。

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;
}
相关文章：