jQuery的每个多个元素

卡洛斯·索萨（Carlos Sosa）

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

我尝试了以下

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

这有效，但所有内容同时显示。由于我一次想要一个，所以我尝试执行以下操作

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

这给我一个错误TypeError'无法读取属性Display .....'我猜是因为我在另一个函数中，并且$（this）没有引用我想要的元素。如何将元素传递给SetTimeOut函数？

任何帮助将不胜感激

谢谢

这些

查理

使用一个临时变量。

这是一个样本；我修复了示例代码中的其他一些错别字。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。