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);});
            }
        }   

    });   

});

或使用开关/案例

$('#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 multiple onLeave和afterLoad事件

1 个答案: