Fade in/out fixed position div when user scrolls to very bottom of page
===

This seems pretty elementary, but I am trying to get a fixed-position footer div to slide & fade in when a user scrolls to the very bottom of a webpage and then slide & fade out when the user scrolls back up. I have searched Stack Overflow and others have suggested solutions, but my code causes my div to only fade in. The slide in animation doesn't work.  Also, the div doesn't slide & fade out when the user scrolls back up. Any suggestions?

**jQuery:**

    $(function() {
        $('#footer').css({opacity: 0, marginTop: '-100px'});
        $(window).scroll(function() {
            if( $(window).scrollTop + $(window).height() > $(document).height() ) {
                $('#footer').animate({opacity: 1, marginTop: '+=100px'});
            }
        });
    });

**HTML:**

    <div id="footer">
        <!-- footer content here -->
    </div>

**CSS:**

    #footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 100px;
        z-index: 26;
    }

###Thanks for reading!###