英文:
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'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't work on the second div, only on the first.
```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() 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();
$('.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');
}
});
});
<!-- 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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论