jQuery - slide div into screen

Question

I have a div that I am trying to slide into the screen when the user scrolls to a specific point on the page.

I don't want to use scrollDown / scrollUp because it "draws" as it appears.

I need something where the whole div is already populated off screen and then slides into the screen.

I am looking for something along the lines of this: http://www.invisionapp.com/?utm_source=LandBook2&utm_medium=banner&utm_campaign=Product

I tried using .animate but it has a very delayed response (like 1+ minutes)

My code:

jQuery:

$(window).scroll(function() {
    if ($(document).scrollTop() > 725) {

        $('#topHeaderColor').animate({top: 0}, 500);
    }
    else {
        $('#topHeaderColor').animate({top: -150}, 500);
    }
});

HTML:

     <div id="topHeaderColor">
     // Images and other Divs here
     </div>

CSS:

 #topHeaderColor {
     left: 0;
     position: fixed;
     width: 100%;
     z-index: 5;
     background-color: green;
     top: -150px;
     height: 150px;
 }

Answer 1

One way to do it would be to track if the slider div is showing:

http://jsfiddle.net/27jsqzbm/

var showingSlider = false;

$(window).scroll(function() {
    if ($(document).scrollTop() > 725) {
        if (!showingSlider){
            showingSlider=true;
            $('#topHeaderColor').animate({top: 0}, 500);
        }
    }
    else {
        if (showingSlider){
            showingSlider=false;
            $('#topHeaderColor').animate({top: -150}, 500);
        }        
    }
});