带有 onLeave 和 afterLoad 的 fullpage.js 动画答案

【问题标题】：fullpage.js animation with onLeave and afterLoad带有 onLeave 和 afterLoad 的 fullpage.js 动画
【发布时间】：2015-10-06 16:33:18
【问题描述】：

我正在使用 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。

【问题讨论】：

编辑：我在此处的免费域上托管了该网站：yolorekt.co.nf 如果您向下滚动到第二部分，您将看到 2 张图片显示。

标签： javascript jquery css animation fullpage.js

【解决方案1】：

三件事：

如果您发布了一个 jsfiddle，请确保它可以工作......因为它根本不起作用。
您在站点中初始化 fullPage.js 两次。 myjs.js 内部和外部..
如果需要，您可以仅使用 css 创建动画。检查this video。

如果您希望图像再次消失，您必须告诉 fullPage.js 这样做。它不会神奇地发生。只需再次使用onLeave 并说出类似“只要下一张幻灯片不是第 2 部分，就隐藏我的图片”之类的话。

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

【讨论】：