单个元素上的Javascript

Javascript on individual element

本文关键字：Javascript 元素 单个      更新时间：2023-09-26

我在网站上写了一点javascript，当元素出现在视图中时，它会逐渐消失。不过效率很低。

<script type="text/javascript" charset="utf-8">
    $(function () {

$('a.reposition.r1').bind('inview', function (event, visible) {
  if (visible) {
    $("a.reposition.r1").css({"opacity": "1", "transition": "1s"});
  } else {
    $("a.reposition.r1").css({"opacity": "0", "transition": "1s"});
  }
});
$('a.reposition.r2').bind('inview', function (event, visible) {
  if (visible) {
    $("a.reposition.r2").css({"opacity": "1", "transition": "1s"});
  } else {
    $("a.reposition.r2").css({"opacity": "0", "transition": "1s"});
  }
});
$('a.reposition.r3').bind('inview', function (event, visible) {
  if (visible) {
    $("a.reposition.r3").css({"opacity": "1", "transition": "1s"});
  } else {
    $("a.reposition.r3").css({"opacity": "0", "transition": "1s"});
  }
});

});
</script>

我试着让它更紧凑，像这样：

<script type="text/javascript" charset="utf-8">
    $('a.reposition').bind('inview', function (event, visible) {
      if (visible) {
        $("a.reposition").css({"opacity": "1", "transition": "1s"});
      } else {
        $("a.reposition").css({"opacity": "0", "transition": "1s"});
      }
    });

</script>

但现在，当用户将第一个元素滚动到视口中时，所有的元素都会淡入。我希望每个元素在移动到视口中时单独淡入。如何做到这一点？

使用this获取被称为的当前元素

$('a.reposition').bind('inview', function (event, visible) {
  if (visible) {
    $(this).css({"opacity": "1", "transition": "1s"});
  } else {
    $(this).css({"opacity": "0", "transition": "1s"});
  }
});

并消除重复代码：

$('a.reposition').bind('inview', function (event, visible) {
   var opacity = visible ? "1" : "0"; 
    $(this).css({"opacity": opacity, "transition": "1s"});
});
相关文章：