javascript - 找到第一类，然后逐渐将类添加到所有具有相同名称的 div

Question

我从如下表格中选择了一些点:

<div class="steps-wrapper">
    <table class="steps">
        <tbody>
            <tr>

                <td></td>
                <td></td>
                <td class="active"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td class="active"></td>
            </tr>
            <tr>
                <td class="active"></td>
                <td class="active"></td>
                <td class="active"></td>
            </tr>
            <tr>
                <td class="active"></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td class="active"></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

Here is a fiddle to view aswell.

我希望当 td 可见时，它们会逐渐加载。所以我会找到第一个类处于事件状态的 td 并将其淡入。然后它会找到下一个类处于事件状态的 td 并在最后一个之后的 0.2 秒内淡化一个等等。

查看 jsFiddle加载的第一个点将在右上角，然后它会逐渐从右侧加载，穿过并向下加载到左下角。但是，点的形状会发生变化，因此有时它可能会从左上角向下加载到右下角。

到目前为止，这是我的 jQuery:

$(document).ready(function () {
$(function($, win) {
  $.fn.inViewport = function(cb) {
     return this.each(function(i,el){
       function visPx(){
         var H = $(this).height(),
             r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
         return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H)));  
       } visPx();
       $(win).on("resize scroll", visPx);
     });
  };
}(jQuery, window));

$(".steps-wrapper").inViewport(function(px){
    if(px) $('td.active').addClass("o-fade-in");
});

});

我不确定如何加载每个单独的点。我目前在可见时同时加载所有 td。

---

更新:动画现在完美运行。但是，如果一个 .steps-wrapper 被激活，它就会激活页面上的所有内容。我怎样才能使页面上的其他点在像第一个点一样在视口(viewport)中看到之前不会动画？

Here is a new fiddle显示问题。

Answer 1

好吧，我对您的代码做了一些更改，以便按照您想要的方式工作:

1. 让你的表格点 rtl 这样当我们应用类时将从右到左:

.steps {
  direction:rtl;
}

_{同时检查 fiddle 上表格的标记}

2.使用transition添加淡入淡出效果:

.steps td {
  width: 25px;
  height: 25px;
  opacity: 0;
  visibility: hidden;
  /*Add this*/
  transition:2s linear;
}

3.一次添加类(class)一:

$(".steps-wrapper").inViewport(function(px){
    if(px) fadeDots()
});

function fadeDots() {
  var i = 0;
  setInterval(function(){
    $('td.active').eq(i).addClass('o-fade-in');
    i++
  },100)
}

Fiddle Demo

---

编辑::

测试后，我发现 setInterval 一直在运行，可能会扰乱您的性能，因此我们也可以检查所有点何时可见，然后停止间隔:

function fadeDots() {
  var i = 0,
      l = $('td.active').length;

  var m = setInterval(function(){
      $('td.active').eq(i).addClass('o-fade-in');
      i++
      if(i == l) {
        clearInterval(m);
      }
  },100)
}

NewFiddle