Velocity Fade

by Brett Miley

HTML

<script src="http://julian.com/research/velocity/build/velocity.ui.js"></script>
<script src="http://julian.com/research/velocity/build/jquery.velocity.min.js"></script>
<p>Refresh this page to re-run the demo.</p>
<div id="container">
    <div id="element1">First element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</div>
    <div id="element2">Second element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuntnt. Lorem ipsum dolor sit amet, consectetur aabore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</div>
    <div id="element3">Third element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</div>
    <div id="element4">Fourth element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</div>
    <div id="element5">Fifth element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</div>
    <div id="element6">Sixth element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</div>
</div>

CSS

body {
    font-family:"Helvetica Neue", Helvetica;
    width: 90%;
    font-weight: 200;
    letter-spacing: 1px;
    margin: 25px auto 0 auto;
    background: rgb(234, 235, 235);
    color: rgb(25, 25, 25);
}
div, p {
    margin: 0 auto;
}
p {
    color: rgb(125, 125, 125);
    font-size: 0.85rem;
    text-align: center;
    margin-bottom: 17px;
}
#container {
    border: 1px solid gray;
    height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    /* Remember that a scrolling container element must have a position set. */
    position: relative;
    width: 50%;
}
#container div {
    padding-bottom: 10px;
}
#element1 {
    display:none;
    height: 0;
}

JavaScript

$("#container").click(function () {
    $("#element1").velocity({
        height: 100,
        opacity: 1,
    }, {
        display: "block"
    }
                           );
});

//needs work on height