Javascript 间隔显示后的div位置不正确（包括小提琴）_Javascript_Jquery

Javascript 间隔显示后的div位置不正确（包括小提琴）

javascript jquery

Javascript 间隔显示后的div位置不正确（包括小提琴）,javascript,jquery,Javascript,Jquery,我的JavaScript代码有问题。我正在实现一个纸牌游戏，我点击一个按钮，13张纸牌应该每隔一段时间出现 $（“按钮”）。单击（函数（）{ 设i=0； setInterval（函数（）{ 如果（i==4）clearInterval（）； $（“.block”）.eq（i）.css（{visibility:“visible”}）； $（“.block”）.eq（i）.html（“文本”+i）； i++； },100); }); .block{ 显示：内联块；宽度：100px；高度：140像

我的JavaScript代码有问题。我正在实现一个纸牌游戏，我点击一个按钮，13张纸牌应该每隔一段时间出现

$（“按钮”）。单击（函数（）{
设i=0；
setInterval（函数（）{
如果（i==4）clearInterval（）；
$（“.block”）.eq（i）.css（{visibility:“visible”}）；
$（“.block”）.eq（i）.html（“文本”+i）；
i++；
},100);
});
.block{
显示：内联块；
宽度：100px；
高度：140像素；
边框：2倍实心；
可见性：隐藏；
}
钮扣{
位置：绝对位置；
顶部：170px；
左：50px；
}

生成
这是一份工作清单
您可以将高度设置为0
，然后在间隔函数中进行设置
$("button").click(function() {
    let i = 0;
    setInterval(function() {
    if(i == 4) clearInterval();
    $(".block").eq(i).css({visibility:"visible", height: "140px"});
    $(".block").eq(i).html("TEXT" + i);
    i++;
  },100);
});

使用此css：
.block {
  display: inline-block;
  width: 100px;
  height: 0;
  border: 2px solid;
  visibility: hidden;
}

button {
  position: absolute;
  top: 170px;
  left: 50px;
}

可以在.block元素周围放置一个包装div
<html>
  <body>
   <div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
   </div>
    <button id="button">Generate!</button>
  </body>
</html>

我为所有的.block元素添加了一个左边距，但是您当然可以使用flex display或您想要的方式来设置它们。
您可以将.block
元素设置为显示：无而不是可见性：隐藏并将脚本更改为：
 $("button").click(function() {
    let i = 0;
    setInterval(function() {
    if(i == 4) clearInterval();
    $(".block").eq(i).css({display:"inline-block"});
    $(".block").eq(i).html("TEXT" + i);
    i++;
  },100);
});

添加垂直对齐：顶部到内联元素

$（“按钮”）。单击（函数（）{
设i=0；
setInterval（函数（）{
如果（i==4）clearInterval（）；
$（“.block”）.eq（i）.css（{visibility:“visible”}）；
$（“.block”）.eq（i）.html（“文本”+i）；
i++；
},100);
});
.block{
显示：内联块；
宽度：100px；
高度：140像素；
边框：2倍实心；
可见性：隐藏；
垂直对齐：顶部；
}
钮扣{
位置：绝对位置；
顶部：170px；
左：50px；
}

生成
将块设置为display:none
，然后添加display:inlineblock
，这是解决问题的一种方法，但不能解决问题本身
主要问题是块
类上设置的垂直对齐
属性。默认情况下，这设置为基线
。在单击按钮之前，所有div都排成一行，不可见，其基线设置在div的底部。但是，单击按钮时，不仅块变为可见，更重要的是，您在div内添加了一些文本。这会更改基线，使其成为div内文本的底部。但是，由于vertical align:baseline
，行中所有div的基线都尝试对齐。带文本的可见div的基线必须与不带文本的不可见div的基线对齐。但是他们的基线现在不同了，所以他们唯一能坐在基线上的直线上的方法就是把带文本的div往下推
我简化了你的片段，让你明白我的意思。我已经使div可见，删除了按钮，并在html中手动向div中添加了一些文本。如您所见，对于带文本的div，文本的底部与不带文本的div的底部对齐

正文{
背景：白色；
}
.街区{
显示：内联块；
宽度：100px；
高度：140像素；
边框：2倍实心；
}

正文
正文
正文
该代码非常简单，可以放在snipplet中，而不是放在jsFiddle上。您可以使用display
属性而不是visibility，这样就可以了。也许有人能解释原因。谢谢你的回答。你知道为什么吗？不幸的是不知道。我检查了一下，没有得到任何解释。有人提到“可见性：隐藏隐藏一个元素，但它仍然会占用与以前相同的空间”。但看起来最初的位置可能是错误的，并且会立即得到纠正。
 $("button").click(function() {
    let i = 0;
    setInterval(function() {
    if(i == 4) clearInterval();
    $(".block").eq(i).css({display:"inline-block"});
    $(".block").eq(i).html("TEXT" + i);
    i++;
  },100);
});