Question

I am using code off this site: http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/

My problem is I mouse over and the image slides up and when I mouse off it doesn’t slide back down. It should slide down. Does anyone know where my mistake lies here??

My Jquery is referenced in a script file:

$(document).ready(function () {
    $('.boxgrid.slidedown').hover(
        function () {
            $(".cover", this).stop().animate({ top: '-350px' }, { queue: false, duration: 300 });
    }, function () {
        $(".cover", this).stop().animate({ top: '0px' }, { queue: false, duration: 300 });
    })
});

Here’s my HTML:

<div class="boxgrid slidedown"><img class="cover" src="http://localhost:60273/www.cooklikecarolyn.com/pics/food-gallery/snowball-cookies.png" alt="" />
<h3>The Nonsense Society</h3>
<p>Art, Music, Word<br /><a href="http://www.nonsensesociety.com" target="_BLANK">Website</a></p>
</div>

Here’s my CSS:

.boxgrid{
    width: 500px;
    height: 350px;
    margin:10px;
    float:left;
    background:#161613;
    border: solid 2px #8399AF;
    overflow: hidden;
    position: relative;
    border: 1px solid blue;
    cursor: pointer;
}
.boxgrid img{
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

.boxcaption{
    float: left;
    position: absolute;
    background: #000;
    height: 100px;
    width: 100%;
    opacity: .8;
    /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    border: 1px solid red;
    }

 .captionfull .boxcaption 
 {
    margin-top: 350px;
    top: 350;
    left: 0;
 }
 .caption .boxcaption 
 {
    margin-top: 350px;
    top: 310;
    left: 0;
 }

Answer 1

Give this a shot. I used mouseenter and mouse leave as well as added in a missing semi colon

$(document).ready(function () {
    $('.boxgrid.slidedown').mouseenter(
        function () {
            $(".cover", this).stop().animate({ top: '-350px' }, { queue: false, duration: 300 });
    }).mouseleave(
         function () {
            $(".cover", this).stop().animate({ top: '0px' }, { queue: false, duration: 300 });
    });
});