Question

我最近就另一个JQuery::slideUp()顺序多个项目的通用方法向另一个用户做出了一个答案。如果需要参考，可以在这里查看：

解决后，OP向我询问了一个初始跳跃效果，您可以在下一个代码中观察到

$('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 {
  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>

深入研究之后，我发现这与他在display:inline-block元素上拥有的.block属性有关。就目前为止我所读的内容（我尚未在CSS上进行过实验）而言，此属性可以替代float:left。因此，我决定将样式更改为使用float:left而不是display:inline-block，问题就消失了。您可以在下一个代码中对其进行检查：

$('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>

任何人都知道为什么在使用display:inline-block时会出现此问题？

display：inline-block` CSS属性

0 个答案: