jQuery 鼠标滚轮在动画未完成时仅触发一次

Question

我有两个函数animation1()和animation2()。每个函数都包含一些链式动画 (animate())。每个动画集都有两个部分:

1. 在场景 1 中移动对象 > 隐藏它们 > 在场景 2 上显示对象。

2. 第二个动画集相反 - 隐藏场景 2 上的对象 > 显示场景 1 上的对象并将其向右移动

动画正在运行。

我需要的是使用以下规则将这些动画绑定(bind)到mousewheel:

• 当我向下滚动时>运行动画1
• 当我向上滚动时 > 运行动画2
• 当动画1尚未完成时不要运行动画2(反之亦然)
• (TODO)由于鼠标滚轮的原因，不要多次运行 naimation1(与 anim.2 相同)

这是我的代码，它可以工作，但会运行多次，并由于多次触发 mousewheel 增量而造成很大困惑。我尝试了很多在 SO 上找到的解决方案，但没有任何运气。我还尝试解除绑定(bind)mousewheel，它正在工作；但我不知道如何重新绑定(bind)它并向上滚动。

$(window).bind('DOMMouseScroll MozMousePixelScroll mousewheel onmousewheel', function(e){
    //$(this).unbind('DOMMouseScroll MozMousePixelScroll mousewheel onmousewheel');
    if (e.originalEvent.wheelDelta < 0 || e.originalEvent.detail > 0) {
      if ($('.scene1 .image').is(':visible') && $('#content').find(":animated").length === 0) {
        animation1();
      }
    }
    else {
      if ($('.scene2 .image').is(':visible') && $('#content').find(":animated").length === 0) {
        animation2();
      }
    }
});

感谢您的建议!

更新此时，这是我最好的解决方案..动画仅触发一次(使用 jquery.mousewheel，但也可以在没有此库的情况下使用) http://jsfiddle.net/wkupb1Ln/6/

$('#content').mousewheel(function(event) {
    if ($('.image').is(':animated') ) {
        return false;
    }
    if ( (event.deltaY < 0) && $('.scene2 .image').hasClass('invisible') ) {
        animation1();
    }
    if ( (event.deltaY > 0) && $('.scene1 .image').hasClass('invisible') ) {
        animation2();
    }
});

Answer 1

尝试这里找到的scrollstop/scrollstart插件:https://github.com/ssorallen/jquery-scrollstop

然后我会将代码重构为如下所示，通过计算特定时间间隔(此处为 250 毫秒)后的滚动来测量“增量”

$(window).on("scrollstart", function() {
  var Position1 = $window.scrollTop();
  setTimeout(function () {
    var Position2 = $window.scrollTop(), delta = Position2 - Position1;
    if (delta < 0 && $('.scene1 .image').is(':visible') && $('#content').find(":animated").length === 0) {
      animation1();
    } else {
      if (delta > 0 && $('.scene2 .image').is(':visible') && $('#content').find(":animated").length === 0) {
        animation2();
      }
    }
  }, 250);
});

绑定(bind)到“scrollstart”应确保相应的函数仅触发一次。