j(document).ready(function () {
    //To switch directions up/down and left/right just place a "-" in front of the top/left attribute
    //Vertical Sliding
    j('.boxgrid.slidedown').hover(function () {
        j(".cover", this).stop().animate({ top: '-200px' }, { queue: false, duration: 300 });
    }, function () {
        j(".cover", this).stop().animate({ top: '0px' }, { queue: false, duration: 300 });
    });
    //Horizontal Sliding
    j('.boxgrid.slideright').hover(function () {
        j(".cover", this).stop().animate({ left: '200px' }, { queue: false, duration: 300 });
    }, function () {
        j(".cover", this).stop().animate({ left: '0px' }, { queue: false, duration: 300 });
    });
    //Diagnal Sliding
    j('.boxgrid.thecombo').hover(function () {
        j(".cover", this).stop().animate({ top: '200px', left: '200px' }, { queue: false, duration: 300 });
    }, function () {
        j(".cover", this).stop().animate({ top: '0px', left: '0px' }, { queue: false, duration: 300 });
    });
    //Partial Sliding (Only show some of background)
    j('.boxgrid.peek').hover(function () {
        j(".cover", this).stop().animate({ top: '50px' }, { queue: false, duration: 160 });
    }, function () {
        j(".cover", this).stop().animate({ top: '0px' }, { queue: false, duration: 160 });
    });
    //Full Caption Sliding (Hidden to Visible)
    j('.boxgrid.captionfull').hover(function () {
        j(".cover", this).stop().animate({ top: '120px' }, { queue: false, duration: 160 });
    }, function () {
        j(".cover", this).stop().animate({ top: '200px' }, { queue: false, duration: 160 });
    });
    //Caption Sliding (Partially Hidden to Visible)
    j('.boxgrid.caption').hover(function () {
        j(".cover", this).stop().animate({ top: '120px' }, { queue: false, duration: 160 });
    }, function () {
        j(".cover", this).stop().animate({ top: '160px' }, { queue: false, duration: 160 });
    });
});