jQuery mousewheel fire только один раз, пока анимация не закончена

Question

У меня есть две функции: animation1() и animation2(). Каждая из этих функций содержит несколько анимаций (animate()) в цепочке. Каждый набор анимации состоит из двух частей: объект

1. двигаться в СЦЕНЫ1> скрыть их> показать объект на сцене 2.

2. Второй набор анимации в обратном направлении - скрыть объект на СЦЕНЫ2> показать объект на СЦЕНЫ1 и переместите их вправо

Анимация работает.

Что мне нужно, чтобы связать эти анимации mousewheel с этими правилами:

• , когда я прокручиваю вниз> запустить animation1
• когда я прокручивать вверх> запустить animation2
• не запускать animation2 в то время как animation1 не закончил (и наоборот)
• (TODO) не работают naimation1 несколько раз из-за колесика мыши (то же самое для anim.2)

Это мой код, который работает, но работает несколько раз и создает большой беспорядок из-задельтах, выпущенных несколько раз. Я пробовал много решений, найденных на SO без везения. Я также попытался развязать mousewheel, который работает; но я не знаю, как восстановить его обратно и прокрутить вверх.

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

Спасибо за любой совет!

UPDATE В это время, это мое лучшее решение .. анимация срабатывает только один раз (с использованием 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 plugin можно найти здесь: 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); 
}); 

Привязка к «scrollstart» должна гарантировать, что соответствующая функция срабатывает только один раз.