fullpage.js 多个 onLeave 和 afterLoad 事件

Question

我正尝试在我的 fullpage.js 中为不同的部分实施多个 afterLoad 和 onLeave 事件。但是只有最后一个似乎在工作，这里有什么问题吗？

如果我删除最后一个，第一个效果很好。所以看起来我以错误的方式组合了它们，所以一个禁用了另一个。

$('#fullpage').fullpage({
      onLeave: function(index, nextIndex, direction) {
          if (nextIndex == 3 || nextIndex == 1) {
              $('.aboutme').hide("slide", {
                  direction: "left"
              }, 200);
          }


      },
      afterLoad: function(anchorLink, index) {
          if (index == 2) {
              $('.aboutme').show("slide", {
                  direction: "left"
              }, 200);
          }

      },

      onLeave: function(index, nextIndex, direction) {

          if (nextIndex == 2) {
              $('.titlea').hide("slide", {
                  direction: "right"
              }, 200, function() {
                  $('.titleb').hide("slide", {
                      direction: "right"
                  }, 200);
              });
          }

      },
      afterLoad: function(anchorLink, index) {

          if (index == 1) {
              $('.titlea').show("slide", {
                  direction: "right"
              }, 200, function() {
                  $('.titleb').show("slide", {
                      direction: "right"
                  }, 200);
              });
          }
      }
  });

更具体地说，组合多个 onLeave 和 afterLoad 方法的正确方法是什么？

Answer 1

鉴于您的事件函数中已有 if 子句，试试这个

$('#fullpage').fullpage({
        onLeave: function(index, nextIndex, direction){                
            if (nextIndex == 3 || nextIndex == 1 ) {
                $('.aboutme').hide("slide", { direction: "left" }, 200);
            } else if (nextIndex == 2 ) {
                $('.titlea').hide("slide", { direction: "right" }, 700, function(){$('.titleb').hide("slide", { direction: "right" }, 200);});
            }
        },
        afterLoad: function(anchorLink, index){
            if (index == 2){
                $('.aboutme').show("slide", { direction: "left" }, 200);
            } else if (index == 1 ) {
                $('.titlea').show("slide", { direction: "right" }, 700, function(){$('.titleb').show("slide", { direction: "right" }, 200);});
            }
        }   

    });   

});

或使用switch/case

$('#fullpage').fullpage({
        onLeave: function(index, nextIndex, direction){  
            switch(nextIndex){
                case 3:
                case 1:
                    $('.aboutme').hide("slide", { direction: "left" }, 200);
                    break;
                case 2:
                    $('.titlea').hide("slide", { direction: "right" }, 700, function(){$('.titleb').hide("slide", { direction: "right" }, 200);});
                    break;
            }
        },
        afterLoad: function(anchorLink, index){
            switch(index){
                case 2:
                    $('.aboutme').show("slide", { direction: "left" }, 200);
                    break;
                case 1:
                    $('.titlea').show("slide", { direction: "right" }, 700, function(){$('.titleb').show("slide", { direction: "right" }, 200);});
                    break;
            }
        }   

    });   

});

基本上，您有一个事件回调函数，并根据传递的参数决定要采取的操作。

fullpage.js 多个 onLeave 和 afterLoad 事件

fullpage.js multiple onLeave and afterLoad events

html

css

jquery

fullpage.js