Question

当你到达section中的特定部分时，我试图获得一个小点动画但是，我在元素I的阵列中的顺序遇到了一些麻烦。动画看到这个fiddle或以下here on Wiki。你可以看到订单已关闭，当我删除middle.reverse();时理论上订单是正确的，但我需要反转中间部分，否则动画没有多大意义：

＆＃13;

console.log($);

$(document).ready(function() {
  var table = $('<table class="steps"></table>');
  var stepWrapper = $('<div class="steps-wrapper"></div>');

  for (var i = 0; i < 7; i++) {
    var tr = $('<tr></tr>');
    for (var j = 0; j < Math.round($(window).width() / 2 / 40) - 1; j++) {
      var td = $('<td></td>');
      if (i == 3) {
        td.addClass('active middle');
      }
      if (j == Math.round($(window).width() / 2 / 40) - 2 && i < 3) {
        td.addClass('active first');
      }
      if (j == 0 && i > 3) {
        td.addClass('active last');
      }
      tr.append(td);
    }

    table.append(tr);
  }


  stepWrapper.append(table);

  $('section').each(function() {
    var clone = stepWrapper.clone();
    $(this).append(clone);
  });

  $(window).scroll(function() {
    $('section .steps-wrapper').each(function() {
      if ($(window).scrollTop() > $(this).offset().top - $(window).height() / 2 && !$(this).hasClass('active')) {
        $(this).addClass('active');
        var first = [],
          middle = [],
          last = [];

        $(this).find('td.active').each(function() {
          if ($(this).hasClass('first')) {
            first.push($(this));
          } else if ('middle') {
            middle.push($(this));
          } else if ('last') {
            last.push($(this));
          }
        });

        middle.reverse();
        var combined = first.concat(middle, last);

        TweenMax.staggerTo(combined, 0.5, {
          autoAlpha: 1,
          ease: Back.easeIn
        }, 0.2);
      }
    });
  });
});

＆＃13;

section {
  height: 100vh;
  width: 100vw;
  position: relative;
}
.steps-wrapper {
  position: absolute;
  width: 100%;
  bottom: -150px;
}
table {
  margin: 0 auto;
}
tr {} td {
  width: 40px;
  height: 40px;
  opacity: 0;
  visibility: hidden;
}
tr:nth-child(4) td:before,
tr:nth-child(1) td:last-child:before,
tr:nth-child(2) td:last-child:before,
tr:nth-child(3) td:last-child:before,
tr:nth-child(5) td:first-child:before,
tr:nth-child(6) td:first-child:before,
tr:nth-child(7) td:first-child:before {
  content: '';
  width: 5px;
  height: 5px;
  display: block;
  margin: 15px auto;
  background: black;
  border-radius(50%);
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section></section>
<section></section>
<section></section>
<section></section>

＆＃13;

任何提示？

反转数组的特定部分

0 个答案: