Question

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");
    });

});

What I need is an animation for the hover() and mouseout() functions, so whenever I hover on one of the images, it shows the text and whenever the mouse leaves the image area it shows the “basic text” (as in the abovementioned code). It should look something like this:
http://jsfiddle.net/xgyaQ/
but as you can see I appended the animate({ opacity: ‘toggle’ }) function only for presentational purposes and it’s not functioning as it should.

I just need the functionality of the first code with the animate effect of the second and I have no idea how I should write the javascript to achieve that.

And one more thing – any idea what should i change so the basic text doesn’t show when hovering on the empty space between the images, because when you hover form one image to another it doesn’t look cool.

Thank you!

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

$(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

Thats the effect I was looking for. Is there a better way to achieve it?

Answer 1

This is probably what you need, based on your HTML/CSS:

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

Nonetheless you should think about rebuilding parts of your CSS, as floating list elements with absolute positioned image elements inside make no sense.

cya,
Liquinuat