我有一个网站,我使用一个小的 jQuery 函数和 css 来翻译页面滚动上的部分(淡入并向上移动)。
我不想设置动画的所有部分都有“sp-portfolio”的子类,即 sp-page-builder .section .sp-portfolio
但该函数适用于 .sp-page-builder 部分
见下文(请注意,这在 Joomla 中运行,因此开头的语法略有不同:
jQuery(document).on("scroll", function () {
var pageTop = jQuery(document).scrollTop()
var pageBottom = pageTop + jQuery(window).height()
var tags = jQuery(".sp-page-builder section")
for (var i = 0; i < tags.length; i++) {
var tag = tags[i]
if (jQuery(".sp-portfolio")[0]){
//Do Nothing
} else {
if (jQuery(tag).position().top < pageBottom) {
jQuery(tag).addClass("visible").delay( 800 )
} else {
jQuery(tag).removeClass("visible")
}
}
}
})
CSS 是:
/** Animation test **/
.sp-page-builder section:nth-child(n+3):not(:nth-last-child(-n+2)) {
opacity: 0;
transition: opacity 1s;
transform: translate(0, 100px);
transition: all 0.6s;
}
.sp-page-builder section:nth-child(n+3):not(:nth-last-child(-n+2)).visible {
opacity: 1;
transform: translate(0, 0);
}
有没有办法检查子类 .sp-portfolio 是否存在,如果存在则跳过该部分的函数。
上面的代码似乎只是跳过整个页面上的函数,而不是继续下一部分。
可以在此处查看示例页面:SP Portfolio - 不应移动的部分是“我们的工作”和“最新见解”。
最佳答案
重读时我注意到 .sp-portfolio
类不在section
上,但位于 DOM 树较低的某个位置。在这种情况下,最简单的方法就是按如下方式修复代码:
if (jQuery(".sp-portfolio")[0]){
//Do Nothing
} else {
可以重写如下
if (jQuery(".sp-portfolio", tag).length){
//Do Nothing
} else {
指定tag
作为第二个参数意味着 jQuery 仅在该元素内部搜索(又名 context )。
<罢工> 您可以使用 :not() selector在查询中。
var tags = jQuery(".sp-page-builder section:not(.sp-portfolio)")
这样你只能得到 section
没有类 .sp-portfolio
。
罢工>
关于jquery - 从 Jquery/CSS 中的动画中排除子类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57711326/