Question

需要依次slideUp个元素，而不是不紧缩的。

block2应该在block1关闭时开始滑动。

block3应该在block2关闭时开始滑动。

以此类推。实际上，我有很多这样的元素，因此任何嵌套语法（函数内部的函数）都不适合。

我希望async await是正确的方法，但不能完全理解。

这是我的尝试：

$('button').on('click', function(){
close_all();
});
async function close_all(){
  await close1();
  await close2();
  await close3();
}
function close1(){
$('#block1').slideUp();
}
function close2(){
$('#block2').slideUp();
}
function close3(){
$('#block3').slideUp();
}

.block{
display:inline-block;
width:14%;
background:gold;
margin:0 9px;
}
#block1{
height:54px;
}
#block2{
height:25px;
}
#block3{
height:72px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='block' id='block1'>BLOCK 1</div>
<div class='block' id='block2'>BLOCK 2</div>
<div class='block' id='block3'>BLOCK 3</div>
<button>CLICK</button>

Answer 1

一种方法可能是使用可以在slideUp()方法上使用的on complete回调：

$('button').on('click', function()
{
    close_all($(".block"));
});

function close_all(elements, idx=0)
{
    if (idx >= elements.length)
        return;

    let cb = () => close_all(elements, idx + 1);    
    elements.eq(idx).slideUp(2000, cb);
}

.block {
  float: left;
  width:14%;
  background:gold;
  margin:0 9px;
}

#block1{
  height:54px;
}

#block2{
  height:25px;
}

#block3{
  height:72px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='block' id='block1'>BLOCK 1</div>
<div class='block' id='block2'>BLOCK 2</div>
<div class='block' id='block3'>BLOCK 3</div>
<button>CLICK</button>

按顺序向上滑动元素

1 个答案: