javascript - 带有 onLeave 和 afterLoad 的 fullpage.js 动画

Question

我正在使用 fullpage.js，我想在进入第二部分后立即为 2 个图像制作动画。看起来我不能让它只与 css 一起工作，所以我从文档中获取了一些 js 代码。检查这个 jsfiddle:http://jsfiddle.net/67oe1jvn/9/

问题是:如果我向下滚动到第二部分，这 2 个图像会变成动画并从左侧和右侧淡入。但是，如果我更改部分，什么也不会发生...现在我希望在离开第二部分后立即“消失”。

我按照文档中的说明使用了 afterLoad 和 onLoad，如下所示:

$.fn.fullpage({

afterLoad: function(anchorLink, index){
        var loadedSection = $(this);
        if(index == 1){
            $('#slidetext1 #rock').animate({right:"0px"});
            $('#slidetext1 #deer').animate({left:"0px"});
        }
    },
onLeave: function(index, nextIndex, direction){
        var leavingSection = $(this);
        if(index == 2 && direction =='up'){
            $('#slidetext1 #rock').animate({right:"-271px"});
            $('#slidetext1 #deer').animate({left:"-271px"});

      } else if(index == 2 && direction == 'down'){
            /* DO SOMETHING */
        }
}
});

我是这个插件的新手所以如果有人帮助我会很酷 :)

我还看到这个人发布了一个类似的问题，也许可以帮助澄清我需要什么:fullPage.js onLeave event triggers .

Answer 1

三件事:

• 如果您发布了一个 jsfiddle，请确保它能正常工作...因为它根本不起作用。

• 您正在站点中两次初始化 fullPage.js。在 myjs.js 内部和外部..

• 如果需要，您可以仅使用 CSS 创建动画。检查this video .

如果你想让图像再次消失，你必须告诉 fullPage.js 去做。它不会神奇地发生。只需再次使用 onLeave 并说“每当下一张幻灯片不是第 2 部分时，然后隐藏我的图像”。

if(nextIndex != 2){
   //hide images
}