“AddClass() 只在第一个 div 元素上起作用”

huangapple go评论79阅读模式
英文:

AddClass() only works on the first div element

问题

我正在尝试在页面滚动时使用淡入效果,但 `AddClass()` 只在第一个 div 元素上起作用,当我在 HTML 中重复相同的代码时,它不会在第二个 div 上起作用,只在第一个 div 上。

```js
$(window).scroll(function () {
  var cbScroll = $(this).scrollTop();
  if (cbScroll > $(".Top").offset().top - $(window).height() / 1.2) {
    $(".Top").each(function (i) {
      setTimeout(function () {
        $(".Top").eq(i).addClass("fadeUpEffect");
      }, 300 * (i + 1));
    });
  } else {
    $(".Top").removeClass("fadeUpEffect");
  }
});

HTML:

<div class="Top">1</div>
<div class="Top">2</div>
<div class="Top">3</div>

CSS:

.Top {opacity: 0;}

.fadeUpEffect{ 
  animation-name: fadeUpCB;
  -webkit-animation-name: fadeUpCB;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  visibility: visible !important;}

@keyframes fadeUpCB{
  0%{transform:translate(0px, 100px); opacity: 0;}
  100%{transform:translate(0px, 0); opacity: 1;}
}

addClass() 在多个 div 上起作用


<details>
<summary>英文:</summary>

I&#39;m trying to use a fade effect when the page is scrolled, but `AddClass()` only works on the first div element, when I repeat the same code in the HTML, it doesn&#39;t work on the second div, only on the first.

```js
$(window).scroll(function () {
  var cbScroll = $(this).scrollTop();
  if (cbScroll &gt; $(&quot;.Top&quot;).offset().top - $(window).height() / 1.2) {
    $(&quot;.Top&quot;).each(function (i) {
      setTimeout(function () {
        $(&quot;.Top&quot;).eq(i).addClass(&quot;fadeUpEffect&quot;);
      }, 300 * (i + 1));
    });
  } else {
    $(&quot;.Top&quot;).removeClass(&quot;fadeUpEffect&quot;);
  }
});

HTML:

&lt;div class=&quot;Top&quot;&gt;1&lt;/div&gt;
&lt;div class=&quot;Top&quot;&gt;2&lt;/div&gt;
&lt;div class=&quot;Top&quot;&gt;3&lt;/div&gt;

CSS:

.Top {opacity: 0;}

.fadeUpEffect{ 
  animation-name: fadeUpCB;
  -webkit-animation-name: fadeUpCB;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  visibility: visible !important;;}

@keyframes fadeUpCB{
  0%{transform:translate(0px, 100px); opacity: 0;}
  100%{transform:translate(0px, 0); opacity: 1;}
}

addClass() work on multiple divs

答案1

得分: 0

代码部分已翻译如下:

$(window).scroll(function() {
  var cbScroll = $(this).scrollTop();
  $('.Top').each(function(i, el) {
    if (cbScroll > $(el).offset().top - ($(window).height() / 1.2)) {
      setTimeout(function() {
        $(el).addClass('fadeUpEffect');
      }, 300 * (i+1));
    } else {
      $(el).removeClass('fadeUpEffect');
    }
  });
});

希望这有所帮助。如果需要更多翻译,请提出具体内容。

英文:

It seems that the problem lies in the way you are using the $('.Top') selector inside the each function. When you repeat the code in the HTML, there are multiple elements with the same class name Top. Therefore, you need to target each element separately instead of targeting all the elements with that class.

You can modify your code as follows to target each element separately:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(window).scroll(function() {
  var cbScroll = $(this).scrollTop();
  $(&#39;.Top&#39;).each(function(i, el) {
    if (cbScroll &gt; $(el).offset().top - ($(window).height() / 1.2)) {
      setTimeout(function() {
        $(el).addClass(&#39;fadeUpEffect&#39;);
      }, 300 * (i+1));
    } else {
      $(el).removeClass(&#39;fadeUpEffect&#39;);
    }
  });
});

<!-- end snippet -->

In the above code, we are using the $(el) to target each element inside the each function. This way, the addClass and removeClass functions will work on each element separately.

huangapple
  • 本文由 发表于 2023年4月19日 16:11:57
  • 转载请务必保留本文链接:https://go.coder-hub.com/76052146.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定