Question

我有一个脚本，可以在滚动时触发HTML5应用程序中的各种淡入淡出/菜单显示 - 脚本通过IScroll的滚动高度触发，如下所示 -

onScrollMove: function() {
           var thisScrol =  myScroll.getScrollY()

           if (thisScrol < -70 ){
                bgfadeToggle('on');
                notifToggle('on');

            }
            if (thisScrol > -70){
                bgfadeToggle('off');
                notifToggle('off');

            }



},

供参考，功能如下 -

 function notifToggle(whichOne){

if (whichOne == "on" && fifth == "yes"){

    setTimeout(function() {fifth="no";}, 10)
        $('.notificationArea .notif').animate({

                    opacity: 0
                  }, 1500);

}
if (whichOne == "off" && fifth == "no"){

    setTimeout(function() {fifth="yes";}, 10)
        $('.notificationArea .notif').animate({

                    opacity:1
                  }, 2500);


}

}


//Move footer ul depending on scroll position
function bgfadeToggle(which){
if (which == "on" && first == "yes"){

    setTimeout(function() {first="no";$('#wrapper').addClass('hov');  }, 10)

                $('.appearLate').fadeIn('1000');

                $('.footer ul ').animate({
                    bottom: [ "-40", "linear" ],
                    opacity: "0"
                  }, 100, "linear");


                $( ".appearLate" ).animate({
                    top: [ "-1", "swing" ],
                    opacity: "1"
                  }, 500, "linear");

}

脚本效果很好 - 除非..你快速向上和向下滚动 - 这会立即触发两个脚本 - 这意味着事情会在错误的时间消失并再次出现 - 是否有任何方法可以阻止脚本像这个 - 即在另一个正在运行时禁用某个功能？

有什么想法吗？

Answer 1

使用stop()停止当前正在运行的动画

  $('.notificationArea .notif').stop().animate({
                opacity: 0
              }, 1500);

或

stop(true,true)

如果参数为true，则队列中的其余动画将被删除，并且永远不会运行。在这种情况下通常使用stop(true,true)

脚本触发时序

1 个答案: