从 Jquery/CSS 中的动画中排除子 class

Question

我有一个网站，我正在使用一个小的 jQuery 函数和 css 来翻译页面滚动上的一个部分（淡入和向上移动）。

我不想设置动画的所有部分都有 'sp-portfolio' 的子 class，即 sp-page-builder .section .sp-portfolio，但该功能适用于 .sp-page-builder section 见下文（请注意，它在 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);
}

有没有办法检查 sub-class .sp-portfolio 是否存在，如果存在则跳过该部分的功能。

上面的代码似乎只是跳过了整个页面上的功能，而不是转到下一部分。

可以在此处查看示例页面：SP Portfolio - 不应移动的部分是 'Our Work' 和 'Latest Insights'。

Answer 1

您可以测试 class sp-portfolio 的元素是否存在于 JavaScript.

if ($(".sp-portfolio")[0]) {
    // Class exists
} else {
    // Class does not exist
}

Answer 2

由于您处于 if 查询的循环中，并且 if 查询应仅引用当前元素，因此还必须解决此元素。

您可以通过更改代码轻松做到这一点

if (jQuery(".sp-portfolio")[0]){

在

if (jQuery(tag).hasClass(".sp-portfolio")){

您使用的代码总是引用整个网页上第一个元素对应的 class，无论它是否在循环中。因此，如果 class 只存在一次 – 无论在页面的哪个位置 – 查询总是 returns 一个 true 并且行为正确。

通过小的调整，您只需引用循环中的当前元素，而不是整个页面。

希望对您有所帮助。 :)

Answer 3

<script>
jQuery(document).on("scroll", function () {
    var pageTop = jQuery(document).scrollTop()
    var pageBottom = pageTop + jQuery(window).height()
    var tags = jQuery(".sp-page-builder section").not(".sp-portfolio");
    for (var i = 0; i < tags.length; i++) {
        var tag = tags[i]
        if (jQuery(tag).position().top < pageBottom) {
            jQuery(tag).addClass("visible").delay( 800 )
        } else {
            jQuery(tag).removeClass("visible")
        }
    }
})
</script>

你应该使用 .not jQuery 的功能，这会让你 select 只有那些 .sp-page-builder section 元素，没有 sp-portfolio class.

Answer 4

重新阅读时，我注意到 .sp-portfolio class 不在 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)")~~

~~这样你只会得到没有 class .sp-portfolio 的 section。~~

从 Jquery/CSS 中的动画中排除子 class

Excluding a sub-class from an animation in Jquery/CSS

css

jquery

joomla