获取完整页面上加载的幻灯片.js slideload回调

Get the loaded slide on fullpage.js slideload callback

本文关键字：幻灯片 js slideload 回调 加载 获取      更新时间：2023-09-26

我正在使用fullpage.js，并试图在加载幻灯片时获得一个元素的动画。每张幻灯片都是这样的：

<div class="slide" id="id">
  <div class="slideWording animateHidden">
      <div class="slideWordingTitle">
         <h1 class="fancy"><span>Title</span></h1>
      </div>
    </div>
 </div>

与fullpage.js 一起使用的回调

afterSlideLoad: function(slideIndex){
            $(".slideWording").addClass("animateVisible animated bounceInDown");
},

唯一的问题是它能在第一次加载幻灯片时工作，但当这种情况发生时，它会将类添加到所有的幻灯片Wordingdiv中，而不仅仅是加载了幻灯片上的那一个。所以基本上动画只起作用一次。如何将animateVisible animated bounceInDown类仅添加到加载的幻灯片中的.slideWording类div中，以便当一个人导航到新幻灯片时，它每次都会在.slideWording上运行动画？？

如果您使用的是最新版本的fullPage.js（目前为2.5.6），请执行以下操作：

afterSlideLoad: function(slideIndex){
    $(this).find('.slideWording').addClass("animateVisible animated bounceInDown");
},

在回调afterSlideLoad的文档中可以看到，$(this)包含加载的幻灯片。

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
        var loadedSlide = $(this);  /// <------ here
        //first slide of the second section
        if(anchorLink == 'secondPage' && slideIndex == 1){
            alert("First slide loaded");
        }
        //second slide of the second section (supposing #secondSlide is the
        //anchor for the second slide
        if(index == 2 && slideIndex == 'secondSlide'){
            alert("Second slide loaded");
        }
    }
});
相关文章：