JQuery hover and mouseout.animate

here is my code: http://jsfiddle.net/FUnhK/

$(document).ready(function(){
    $("img").hover(function(){
        var text = $(this).attr("alt");
        $("h2").text(text);
    });
    $("img").mouseout(function(){
        $("h2").html("Basic Text");
    });

});

      

        
        
        
      

    

I need animations for the hover () and mouseout () functions, so whenever I am on one of the images, it shows the text and whenever the mouse leaves the area of ​​the image, the "main text" is displayed (as in the code above). It should look something like this: http://jsfiddle.net/xgyaQ/ but as you can see I added the animation function ({opacity: 'toggle'}) for presentation purposes only and it doesn't function as it should.

I just need the functionality of the first code with an animated effect of the second, and I have no idea how I would write javascript to achieve this.

And one more thing - any idea that I should change, so the main text is not displayed when you hover over the blank space between images, because when you hover one image over another, it doesn't look cool.

Thank!

P.S. Ok, thanks to Liquinaut, I made it work with the fadeIn effect, but hid the element first:

$(document).ready(function () {
    $("img").mouseenter(function () {
        var text = $(this).attr("alt");
        $("h2").text(text).hide().fadeIn(400);
    });
    $("ul").mouseleave(function() {
        $("h2").text('Basic Text').hide().fadeIn(400);
    });
});

      

        
        
        
      

    

http://jsfiddle.net/FUnhK/3

This is the effect I was looking for. Is there a better way to achieve this?