javascript - Firing an animation when aligned -

i creating splitscrolling website , it's working great. have 1 problem, when user stops scrolling fires function called alignwhenidle , align columns become "one".

now working nicely can't seem target specific part of column aligns. let's when number 2 column aligns ( see image ) want able fire animation. tried using callback fires function every time columns aligned.

this 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/

any appreciated,

cheers

see http://jsfiddle.net/5t9y8/

scroll till column 2 , see result...

in method align i've added callback:

$('html, body').animate({ scrolltop: newtop + totalheight }, 200, function(){   $(".animate").animate({ marginleft: "200px" },300); }); 

works well, did need that?

edit

you should check condition.

e.g. based on solution check if element visible after scrolling can build this:

$('html, body').animate({ scrolltop: newtop + totalheight }, 200, function(){   if (isscrolledintoview(".animate")) $(".animate").animate({ marginleft: "200px" },300); }); 

see updated solution here http://jsfiddle.net/5t9y8/1/

this 1 way, i'm sure there way better. e.g. can calculate current elements shown , find things inside of them.