JQuery 每个多个元素

Question

我有几个类名为“hidden”的元素，基本上将显示设置为无。我正在尝试使用 jquery 创建一个函数，当我单击按钮时，具有该类名称的每个元素都应该一次可见一个，并且最好带有一些动画。

我尝试了以下方法

$('btn1').click(function() {
    $('.hide').each(function(index) {
        $(this).toggle();
    });
});

这可行，但所有内容都会同时显示。因为我一次想要一个，所以我尝试执行以下操作

$('btn1').click(function() {
    $('.hide').each(function(index) {
        setTimeOut(function() {
            $(this).toggle();
        },1500);
    });
});

这给了我一个错误 TypeError 'cannot read property Display.....' 我猜这是因为我在另一个函数中并且 $(this) 没有引用我想要的元素。如何将元素传递给 SetTimeOut 函数？

任何帮助将不胜感激

谢谢

国际消费电子展

Answer 1

使用临时变量。

这是一个示例；我修复了示例代码中的一些其他拼写错误。

$('.btn1').click(function() {
    $('.hide').each(function(index) {
        var e = $(this);
        e.css('--animation-order',"\""+index+"\"");
        e.addClass('show');
    });
});

.hide{
  opacity: 0;
}
.hide.show{
  animation-name: animateIn;
  animation-duration: 350ms;
  animation-delay: calc(var(--animation-order) * 200ms + 200ms);
  animation-fill-mode:both;
}
@keyframes animateIn {
  0% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn1">start</button>

<div class="hide">a</div>
<div class="hide">b</div>
<div class="hide">c</div>