gpt4 book ai didi

javascript - 重置回调,以便每次用户滚动到 fullPage.js 中的某个部分时都会触发回调

转载 作者:行者123 更新时间:2023-12-01 05:23:10 25 4
gpt4 key购买 nike

我对某些部分评论了淡出,但在第二次滚动后无法让它们重新出现,而且我对 JavaScript 的了解不够深,无法找到正确的解决方案。我该怎么做呢?

  $(document.body).fadeIn(1000);
$(document).ready(function() {

'use strict';

// variables
var $isH1First = $('.first .is-animated h1'),
$ispFirst = $('.first .is-animated p'),
$isH1Second = $('.second .is-animated h1'),
$ispSecond = $('.second .is-animated p'),
$isH1Third = $('.third .is-animated h1'),
$ispThird = $('.third .is-animated p');

// initialize fullPage
$('#fullpage').fullpage({

// navigation: true,
scrollingSpeed: 1400,
resetSliders:true,
fitToSectionDelay: 1000,

afterLoad: function(index, nextIndex) {
if( nextIndex === 1 ) {
$isH1First.addClass('animated fadeInLeft').css('animation-delay', '.05s');
$ispFirst.addClass('animated fadeInLeft').css('animation-delay', '.45s');
}
},
onLeave: function(index, nextIndex) {
// first animation
if( nextIndex === 2) {
// $isH1First.addClass('animated fadeOutUp');
// $ispFirst.addClass('animated fadeOutUp');
$isH1Second.addClass('animated fadeInDown').css('animation-delay', '.45s');
$ispSecond.addClass('animated fadeInDown').css('animation-delay', '.85s');
}
// second animation
else if( nextIndex === 3 ) {
// $isH1Second.addClass('animated fadeOutUp');
// $ispSecond.addClass('animated fadeOutUp');
$isH1Third.addClass('animated bounceInDown').css('animation-delay', '.45s');
$ispThird.addClass('animated flipInX').css('animation-delay', '.85s');
}
}
});
});

最佳答案

我知道这已经很晚了,我使用velocity.js 来获得漂亮的动画,并且我只想显示动画一次,而不是每次加载该部分时都显示动画。

如果我理解正确,那么您正在尝试实现相反的目标,这对我来说是默认行为。

我的代码的一个小例子:

if (index === 1) {
//slide 1 animation
if (!$jq(".refine").is(":visible")
{
$jq(".refine").velocity("fadeIn", {duration: 2000});
}
}

关于javascript - 重置回调,以便每次用户滚动到 fullPage.js 中的某个部分时都会触发回调,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41749350/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com