Увольнение анимации при выравнивании

Question

Я создаю сайт splitscrolling, и он отлично работает. Но у меня есть одна проблема, когда пользователь перестает прокручивать ее, запускает функцию, называемую alignWhenIdle, и что это значит, выравнивает столбцы, чтобы они стали «одним».

Теперь это хорошо работает, но я не могу настроить таргетинг на определенную часть столбца, который выравнивается. допустим, когда выравнивание столбца номер 2 (см. изображение), я хочу, чтобы можно было запустить анимацию. Я попытался использовать обратный вызов, но он запускает функцию каждый раз, когда столбцы выровнены.

Это мой JS:

(function ($) { 
var top = 0; 
var contentHeight, contents, totalHeight; 
var locked = false; 
var timeout; 

var align = function() { 
    var pos = (top + $(window).scrollTop()); 
    var snapUp = 0 - (pos % contentHeight) < (contentHeight/2); 
    var multiplier = snapUp 
     ? Math.ceil(pos/contentHeight) 
     : Math.floor(pos/contentHeight); 
    var newTop = contentHeight * multiplier; 
    $('html, body').animate({ scrollTop: newTop + totalHeight }, 200); 
    locked = false; 
}; 

var reset = function() { 
    contentHeight = $('.right').height(); 
    contents = $('.right > .content').length; 
    totalHeight = contentHeight * (contents - 1); 
    top = (0 - totalHeight); 
}; 

var scrollRight = function() { 
    $('.right').css('top', (top + $(window).scrollTop()) + 'px'); 
}; 

var alignWhenIdle = function (delay) { 
    clearTimeout(timeout); 
    timeout = setTimeout(align, delay); 
}; 

$(document).on('ready', function() { 
    reset(); 
    scrollRight(); 
}); 

$(window).on('scroll', function() { 
    locked = true; 
    scrollRight(); 
}); 

$(window).on('mouseup', function (e) { 
    if (locked) { 
     align(); 
    } 
}); 

$(window).resize(function() { 
    locked = true; 
    reset(); 
    scrollRight(); 
    alignWhenIdle(300); 
}); 

$(window).on('mousewheel', function (e) { 
    alignWhenIdle(300); 
}); 

$(window).on("keyup", function (e) { 
    alignWhenIdle(300); 
}); 

})(jQuery); 

http://jsfiddle.net/ev3B8/

Любая помощь очень ценится,

Приветствия

Answer 1

См http://jsfiddle.net/5T9Y8/

Scroll до колонки 2 и посмотреть результат ...

В методе выравнивания я добавил функцию обратного вызова:

$('html, body').animate({ scrollTop: newTop + totalHeight }, 200, function(){ 
    $(".animate").animate({ marginLeft: "200px" },300); 
}); 

работает хорошо, так что вам нужно точно что?

EDIT

Вы должны просто проверить некоторое условие.

E.g. на основе этого решения Check if element is visible after scrolling можно построить так:

$('html, body').animate({ scrollTop: newTop + totalHeight }, 200, function(){ 
    if (isScrolledIntoView(".animate")) $(".animate").animate({ marginLeft: "200px" },300); 
}); 

Смотрите обновленное решение здесь http://jsfiddle.net/5T9Y8/1/

Это только один из способов, я действительно уверен, что есть способ сделать это еще лучше. Например. вы можете рассчитать текущие элементы, которые показаны, а затем просто найти вещи только внутри них.

Answer 2

Я попытался с помощью са llback, но каждый раз, когда столбцы выровнены, срабатывает функция.

Используйте метод one для работы только один раз, а не на.