So here is how I did it. Notice I used fadeOut()
to change the opacity
, this was because changing the css
opacity
was unstable sometimes it wouldnt change all the elements.
<script type="text/javascript">
$(document).ready(function() {
$.fn.fullpage({
anchors: ['1', '2'],
afterRender: function(){
//For the initial animation, aferLoad does not work.
$(".test").each(function(i){
$(this).delay(i*600).animate({ opacity: 1 }, 900);
});
},
afterLoad: function( anchorLink, index, slideAnchor, slideIndex){
//When the first slide is navigated to perform animation.
if(anchorLink == '1'){
$(".test").each(function(i){
$(this).delay(i*600).animate({ opacity: 1 }, 900);
});
}
},
onLeave: function(index, direction){
//When navigated away from first slide reset the opacity.
if(index == '1' && direction == 'down'){
$(".test").fadeTo(400,0);
}
}
});
});
</script>