jQuery循环不断寻找尸体class

Question

我不太擅长jQuery，但我想实现的是一个循环，它会不断检查某个class的body标签，然后在class附在身上。我的网站在我的主页上有各种全屏部分，正文的 class 会在我滚动浏览这些部分时更新以反映当前在屏幕上的部分。我希望能够继续检查 body 标签，直到显示第 2 节（class 是 "fp-viewing-2"），在这个阶段我将执行一些 css 动画。

if ($("body").hasClass("fp-viewing-2")){
  $("#sec3text1").removeClass("hidden");
  $("#sec3text1").addClass("animated fadeInLeft");
};

这是一般逻辑，但是这只会在页面加载时检查一次，我需要它不断检查直到 body 有 class "fp-viewing-2".

提前致谢。

Answer 1

您似乎在寻找一个间隔或递归超时，它一直运行到 class 被找到。一种选择是：

const interval = setInterval(() => {
  if ($("body").hasClass("fp-viewing-2")){
    $("#sec3text1")
      .removeClass("hidden")
      .addClass("animated fadeInLeft");
    clearInterval(interval);
  }
}, 1000);

请注意，您可以将 addClass 链接到 removeClass 以减少代码。

末尾的“1000”表示间隔运行的频率 - 1000 表示 1000 毫秒。（要使间隔更频繁地触发，请减少该数字，反之亦然）

注意if语句括号{}最后的}.

不要有分号

Answer 2

我可以给你一个概念。据我了解，执行功能的关键是在屏幕上显示所需的标签。所以首先，我会在滚动上设置一个事件并检查所需的标签是否在屏幕上。这是您可以看到该功能的答案，它检测元素是否在屏幕上： Check if element is visible after scrolling

所以，逻辑如下： 1）检查卷轴， 2）放置函数调用以检查您的标签是否在可见屏幕上。如果是 - 触发你的动作。

这是js函数和滚动事件处理程序的例子：

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

document.addEventListener('scroll', function (event) {
        //console.log('scroll event caught');
        var elInView=isScrolledIntoView($('.someSpecClass'));
         console.log("elInView="+elInView);
         if(elInView){
         alert("do your thing here, element is in view");

         }
}, true );

这里有一个 live demo 给你。希望对你有帮助。

Answer 3

使用 fullPage.js 时，您应该利用 fullPage.js 功能。不断检查 body 类不是这样做的方法。另外，它在性能方面相当昂贵。

您应该像 afterLoad 或 afterSlideLoads 一样使用 fullPage.js callbacks。

从 fullpage.js 文档中查看此示例：

new fullpage('#fullpage', {
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

    afterLoad: function(origin, destination, direction){
        var loadedSection = this;

        //using index
        if(origin.index == 2){
            alert("Section 3 ended loading");
        }

        //using anchorLink
        if(origin.anchor == 'secondSlide'){
            alert("Section 2 ended loading");
        }
    }
});

jQuery循环不断寻找尸体class

jQuery Loop to continually look for a body class

html

css

jquery

fullpage.js