在 fullpage.js slideload 回调中获取加载的幻灯片
Get the loaded slide on fullpage.js slideload callback
我正在使用 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");
},
唯一的问题是它在第一次加载幻灯片时有效,但当发生这种情况时,它会将 class 添加到所有 slideWording div 中,而不仅仅是加载幻灯片上的那个。所以基本上动画只工作一次。我如何才能将 animateVisible animated bounceInDown
class 添加到加载的幻灯片中的 .slideWording
class div 以便当一个人导航到新的每次滑动都会运行 .slideWording
上的动画??
如果您使用的是最新版本的 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 并尝试让元素在幻灯片加载时进行动画处理。每张幻灯片是这样的:
<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");
},
唯一的问题是它在第一次加载幻灯片时有效,但当发生这种情况时,它会将 class 添加到所有 slideWording div 中,而不仅仅是加载幻灯片上的那个。所以基本上动画只工作一次。我如何才能将 animateVisible animated bounceInDown
class 添加到加载的幻灯片中的 .slideWording
class div 以便当一个人导航到新的每次滑动都会运行 .slideWording
上的动画??
如果您使用的是最新版本的 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");
}
}
});