Question

我正在使用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");
},

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

Answer 1

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

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

正如the docs for the callback 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");
        }
    }
});

在fullpage.js slideload回调中获取加载的幻灯片

1 个答案: