If else statement not working in jQuery

Question

I have a function that runs depending on the parent div being X pixels from the top of the window...

        if (chartContainer <= 700) {

            $('.firstChart').addClass('rotateLeft');
            $('.firstChart').animate({'left': 30}, 600);
            $('.secondChart').addClass('rotateRight');
            $('.secondChart').animate({'right': 30}, 600);

        } else if (chartContainer > 700) {

            $('.firstChart').removeClass('rotateLeft');
            $('.firstChart').animate({'left': -300}, 600);
            $('.secondChart').removeClass('rotateRight');
            $('.secondChart').animate({'right': -300}, 600);

        }

My function is adding the class fine, but its not running the animate on neither, If I remove my else statement, the add class and animate in the first block of code runs perfectly, can anybody see anything wrong syntax wise?

------- JS Fiddle ---------

http://jsfiddle.net/Gm9Fv/1/

Answer 1

You need to wait for the .animate to complete and then fire the next part.

For the else block.

$('.firstChart').removeClass('rotateLeft');
$('.firstChart').animate({'left': -300}, 600, function(){
    $('.secondChart').removeClass('rotateRight');  
    $('.secondChart').animate({'right': -300}, 600);
});

Same for the if block.

PS Make your else if part be just else . And, make sure that your elements have a positioning which is not static, else this code might not work.

Answer 2

Are you trying to reach something like this : http://jsfiddle.net/8QFzd/2/

IE 2 blocks out of screen (left and right hidden), when you scroll near to them they comme to center of the screen ?

var state = 1 ;

$(window).on('scroll', function (e) {

    var scrollTop = $(window).scrollTop() ;
    var chartContainer = ($('.chartContainer').offset().top - scrollTop);

    console.log(chartContainer);

    if (chartContainer <= 200) {
        if ( state != 1 )
        {
            console.log('<= 200, add Class & animate') ;
            state = 1 ;
            $('.firstChart').addClass('rotateLeft');
            $('.firstChart').stop().animate({
                'left': 30
            }, 600);
            $('.secondChart').addClass('rotateRight');
            $('.secondChart').stop().animate({
                'right': 30
            }, 600);
        }

    } else {
        if ( state != 2 )
        {
            console.log('> 200, remove Class & animate') ;
            state = 2 ;
            $('.firstChart').removeClass('rotateLeft');
            $('.firstChart').stop().animate({
                'left': -300
            }, 600);
            $('.secondChart').removeClass('rotateRight');
            $('.secondChart').stop().animate({
                'right': -300
            }, 600);
        }
    }

});