Question

我正在创建一个网站，其中包含一些动画，当用户滚动浏览页面上的某个点时将播放这些动画。我有这个工作，但在jQuery代码只有我可以让它工作的方法是重复代码，如下所示。

无论如何我可以创建一个函数，它为盒号和类名称提供两个参数，然后调用4次并只传递特定的盒号和类名吗？欢呼帮助

$(window).scroll(function() {
  $(".box1").each(function() {
    var pos = $(this).offset().top;
    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {
      $(this).addClass("slideone");
    }
  });

  $(".box2").each(function() {
    var pos = $(this).offset().top;
    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {
      $(this).addClass("slidetwo");
    }
  });

  $(".box3").each(function() {
    var pos = $(this).offset().top;
    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {
      $(this).addClass("slidethree");
    }
  });

  $(".box4").each(function() {
    var pos = $(this).offset().top;
    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {
      $(this).addClass("slidefour");
    }
  });
});

.box1,
.box2,
.box3,
.box4,
{
  opacity: 0;
  animation-fill-mode: forwards;
}

.slideone,
.slidetwo,
.slidethree,
.slidefour {
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-name: slideone;
  -webkit-animation-name: slideone;
}

.slidetwo {
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
}

.slidethree {
  animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
}

.slidefour {
  animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
}

@keyframes slideone {
  0% {
    opacity: 0;
    transform: translateY(70%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

@-webkit-keyframes slideone {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}

Answer 1

你可以通过在所有.boxN元素上使用公共类来干掉它，并在这些元素上加上data属性来表示应该添加的类，如下所示：

$(window).scroll(function() { 
  $(".box").each(function() {
    var $box = $(this);
    if ($box.offset().top < $(window).scrollTop() + 600) {
      $box.addClass($box.data('class'));
    }
  });
});

<div class="box" data-class="slideone">One</div>
<div class="box" data-class="slidetwo">Two</div>
<div class="box" data-class="slidethree">Three</div>

将varibles传递给jquery中的另一个函数

1 个答案: