jquery Image slide down on hover

using bootstrap framework

by ravimallya

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="https://raw.github.com/twitter/bootstrap/master/docs/assets/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="span3"></div>
        <div class="span6">
            <div class="row">
                <div class="span6">
                    <div class="advtDiv">
                        <img src="http://placehold.it/570x50" class="advtImg">
                    </div>
                                                    </div>
                        <div class="advtImg2">
                    <img src="http://placehold.it/570x150">

                </div>
            </div>
        </div>
        <div class="span3"></div>
    </div>
</div>

CSS

.advtImg2 {
    display:none;
}

JavaScript

$(function () {
    $(".advtDiv").mouseover(function () {
        $(".advtImg2").slideDown(),
         $(".advtImg2").mouseleave(function () {
             $('.advtImg2').slideUp();
         });
    });
    $(".advtDiv").mouselave(function () {
        $(".advtImg2").slideUp();
    });
});