Jquery captions on Hover

I've written a simple script in jQuery that allows a caption to pop in and out based on the .hover trigger.

The problem is that you have to hover over the image, move back out then hover over it again before it works. (you can see what I mean here http://jsfiddle.net/sambeckhamdesign/bqjqb/)

Is it a problem with the (document).ready() part or just a glitch in jQuery itself? I really can't see the problem here, seems too simple to mess up lol.

jQuery(document).ready(function() {
$(".projectImages li").hover(

function() {
    $(this).find(".imageCaption").animate({
        opacity: "show",
        bottom: "0"
    }, "fast");
},

function() {
    $(this).find(".imageCaption").animate({
        opacity: "hide",
        bottom: "-50"
    }, "fast");
});
});

Adjust your image caption class to display:none;. Changing that should define the element in the correct state for the first hover.

.imageCaption{
    display:none;
    position:absolute;
    background:#f0f;
    bottom:-50px;
    width:100%;
    color:#fff;
}

Since your initial state of the element was block the mouse enter never was executed since it was already set to block..

Updated jsfiddle

Try:

jQuery(document).ready(function() {
$(".projectImages li").hover(


    $(this).find(".imageCaption").animate({
        opacity: "show",
        bottom: "0"
    }, "fast").animate({
        opacity: "hide",
        bottom: "-50"
    }, "fast");
});

Use jQuery to hide element on page load :

http://jsfiddle.net/FrelCee/bqjqb/33/