fullpage.js动画与onLeave和后负荷 [英] fullpage.js animation with onLeave and afterLoad

问题描述

我使用fullpage.js，我想只要我到了第二部分的动画2图像。貌似我不能让它只能用CSS的工作，所以我从文档拿起一些JS code。检查这个的jsfiddle： http://jsfiddle.net/67oe1jvn/9/

i'm using fullpage.js and i'd like to animate 2 images as soon as i get to the second section. looks like i can't make it work with css only, so i picked up some js code from the documentation. check this jsfiddle: http://jsfiddle.net/67oe1jvn/9/

事情是：如果我向下滚动到第二部分，2幅图像得到的动画和左，右两侧的褪色。但是，如果我更改部分，没有任何反应......现在我想的要消失当我离开的第二部分。

the thing is: if i scroll down to the second section, the 2 images get animated and fade in from left and right sides. BUT if i change section, nothing happens... now i want the to "disappear" as soon as i leave the second section.

我用后负荷的onLoad如文档中表示，像这样的：

i used afterLoad and onLoad as said in the documentation, like this:

$.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 */
        }
}
});

我是新与此插件，如果有人可以帮助我，所以会很酷：）

i'm new with this plugins so would be cool if someone helps me :)

也只见这家伙张贴了类似的问题，也许可以帮助澄清什么，我需要：全页.js文件onLeave事件触发。

also i saw this guy posting a similar question that maybe can help clarifying what i need: fullPage.js onLeave event triggers .

推荐答案

三件事情：

• 如果您发布的jsfiddle，确保它正常工作......因为它没有在所有。

• If you post a jsfiddle, make sure it works... because it doesn't at all.

您在您的网站两次初始化fullPage.js。在 myjs.js 内外也。

You are initializing fullPage.js twice in your site. Inside myjs.js and outside it..

您可以只使用CSS创建动画，如果你想。检查该视频。

You can create animations with just css if you want. Check this video.

如果您希望图像再次dissappear你必须告诉fullPage.js去做。它不会神奇地出现。
就在 onLeave 再次使用，并说类似每当下一张幻灯片是不是段2，然后隐藏我的图片。

If you want the images to dissappear again you'll have to tell fullPage.js to do it. It won't magically happen. Just use the onLeave again and say something like "whenever the next slide is not section 2, then hide my images".

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

这篇关于fullpage.js动画与onLeave和后负荷的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！