Question

I have a sequence of 5 different images each in a separate div. Underneath these, I have another div which I intend to fill with text depending on whatever image is hovered.

The idea is that each image when hovered will fill this text div with the relevant information. I would also like for this div to animate so that it starts off with height 0 and expand it to 150px then add the text and when mouse is moved off image it should collapse.

There is a footer underneath this area so I cant just hide it and then show when hovered.

Is there a neat way to do this with JavaScript / JQuery ?

Thanks

Edit:

I have put something together myself to try and solve this but there are a couple of issues

$(document).ready(
    function(){    
        $("#upper").hover(
            function(){
                $('#caption').animate({'height': '150px'}, 1500);
                $('#caption').html('Tesrtssadwa');
            }, 
            function(){
                $('#caption').stop().animate({'height': '0px'}, 1500);
            }
        );
}
);

So this does pretty much what I want with a couple of issues. If I quickly hover over the div a few times it will queue the animations. I would ideally like for this not to happen. Is there an easy way to do this or would it be more hassle than its worth ?

Also, at one point I managed to have the div collapsed but the text was still showing. I haven’t been able to reproduce this but is there a way to make the text fade as the div collapses?

$('#caption').html('');

looks a bit bad

Edit: I can reproduce it. Hovering over image until it expands fully, then moving off of it will collapse the div and the text will reappear.

Answer 1

You’ll likely be interested in the mouseover, mouseout, slideDown, and slideUp functions. If I understand correctly, something like this is what you’re looking for:

$("#picture1").mouseover(function() {
        $("#textdiv").slideDown().html("This is information about picture 1. It is the first picture."
}).mouseout(function() {
        $("#textdiv").slideUp();
});

$("#picture2").mouseover(function() {
        $("#textdiv").slideDown().html("This is information about picture 2. It is the second picture."
}).mouseout(function() {
        $("#textdiv").slideUp();
});

$("#picture3").mouseover(function() {
    $("#textdiv").slideDown().html("This is information about picture 3. It is the last picture."
}).mouseout(function() {
    $("#textdiv").slideUp();
});