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
}

withLeave和afterLoad的fullpage.js动画

1 个答案: