hide/show with jquery-css

HTML

<section>
    <div id="whatever">It is just a DIV</div>
    <div id="my-div">My DIV
        <div id="element" class="invisible">The element</div>
    </div>
</section>

CSS

section {
    width:100%;
    min-height: 4000px;
    text-align: center;
    background-color: #e0e0e0;
}
#whatever {
    width: 80%;
    height: 500px;
    margin: 10%;
    background-color: #d0d0d0;
}
#my-div {
    width: 80%;
    height: 300px;
    margin: 10%;
    background-color: grey;
}
#element {
    width: 80%;
    height: 100px;
    background-color: red;
    -webkit-transition: all 1500ms cubic-bezier(0.680, 0, 0.265, 1);
    /* older webkit */
    -webkit-transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -ms-transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    /* easeInOutBack */
}
.invisible {
    opacity: 0;
}
.visible {
    opacity: 1;
}

JavaScript

$(window).scroll(function () {
    if (isScrolledIntoView('#element')) {
        $('#element').removeClass('invisible').addClass('visible');
    } else {
        $('#element').removeClass('visible').addClass('invisible');
    }
});

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}