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，则会激活页面上的所有内容。我怎样才能使页面上的其他点不会生成动画，直到它们在视口中被看到就像第一个点一样？

Here is a new fiddle显示问题。

Answer 1

我已经对您的代码进行了一些更改，以便按照您想要的方式工作：

1。当我们申请课程时，让你的桌子点rtl从右到左：

.steps {
  direction:rtl;
}

_{同时检查小提琴表上的标记}

2。使用transition添加淡入淡出效果：

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

3。一次添加第一课：

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

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

1 个答案:

Fiddle Demo

NewFiddle