Jquery slideDown and animate

by tjdragon

HTML

<div class="item">
    <img src="http://placehold.it/239x179" alt="Demo">
    <div class="description">
        <p> <strong>Project Name Here</strong>

        </p>
        <p class="intro"> <em>Duis ornare interdum ornare integer id vulputate sapien suspendisse quis mauris enim proin eleifend pharetra orci, quis feugiat massa molestie non.</em>

        </p> <a class="btn" href="#">View case study</a>

    </div>

CSS

body {
    font-family: sans-serif;
}
.item {
    margin: 5px 5px 0px 5px;
    float: left;
    width: 239px;
    position: relative;
}
.description {
    color:#fff;
    position: absolute;
    bottom: 0;
    background: #179CFE;
    text-align: center;
    width: 100%;
    height: 100%;
}
.description.hide {
    display: none;
}

JavaScript

$(document).ready(function () {

    $(".description").addClass("hide");

    $('.item').hover(

    function () {
        $(this).find('.description').stop(true, false).slideDown(600).animate({
            opacity: 1
        }, {
            queue: false,
            duration: 600
        }).delay(800);
    },

    function () {
        $(this).find('.description').slideUp(600).animate({
            opacity: 0
        }, {
            queue: false,
            duration: 600
        });
    });


});