JQuery 每个多个元素答案

【问题标题】：JQuery Each Multiple ElementsJQuery 每个多个元素
【发布时间】：2020-02-14 00:46:32
【问题描述】：

我有几个类名为“隐藏”的元素，基本上将显示设置为无。我正在尝试使用 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 函数？

任何帮助将不胜感激

谢谢

国际消费电子展

【问题讨论】：

标签： jquery

【解决方案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>

【讨论】：

非常感谢。有效。可以加动画吗？？还是不能用 display none/block 制作动画？
@Charlie setTimeout 元素多的话会不会很麻烦？参考：stackoverflow.com/a/14863064/1169686
使用 setTimeout 是有风险的，因为你会忘记计时器，如果发生其他事情隐藏了现在可见的元素，那么旧的超时将突然出现并再次显示。我可能会建议一个自定义 css 属性：css-tricks.com/…
我更新为使用带有自定义 css 属性的精美 css 动画。它在 IE 中不起作用。

【解决方案2】：

这基本上就是jQuery.animate() 的工作方式。由于您影响一行中的所有元素，因此它们会同时执行该功能。

您需要的基本上是动画完成回调。我唯一担心的是，如果有很多元素，这可能需要一段时间才能执行。

您可以查看this thread 的 jQuery 动画使用情况，也可以查看 animate()'s documentation。

理想情况下解决您的问题的方法是拥有一个包含您想要影响的所有元素的数组，并创建一个递归函数，该函数为每个元素执行动画，直到所有元素都被动画化。

【讨论】：