javascript - Animate divs on scroll into bootstrap tabs -

i'm real beginner jquery , javascript , i've been struggling day find solution problem. hope of might helpful, shouldn't hard. i'm trying make boxes appear half viewport height has passed through declared class. use code make work:

$(window).scroll(function() {   homeslide(); }); function homeslide() {   var wscroll = $(window).scrolltop();    if($('.prev-div').offset().top - $(window).height()/2 < wscroll) {      $('.boxes').each(function(i) {       settimeout(function() {         $('.boxes').eq(i).addclass('bounce-in');}, 100 *i);     });   } } 

it works on traditional html-css content. doesn't work, or better, works, page loaded, not when scroll proximity. guess because happening inside bootstrap ".tab-content". how refer ".active .tab-pane" make function work closer desired point? hope can solve thing help.
thanx support.

edit: here uploaded simple representation of desired effect on jsfiddle, here's link.

how said works outside of "bootstrap's .tab-content" not inside of it, guess need offset function, tried on , over, no positive results.

shouldn't > instead of <

if($('.prev-div').offset().top - $(window).height()/2 > wscroll)