JQuery - creating a function that hides/displays content

If you go to: http://www.awaismuzaffar.com/examples/content_1.html

you can view a demonstration of my jQuery function.

Basically, it is suppose to hide/display content depending which div the mouse is over.

However, at the moment you will realize that when the mouse has hovered over all the div elements, all the text is overlapping each other开发者_JAVA百科.

I need to figure out a way to hide the content of the previous div, when the mouse is over another div. Not sure how to do this.

Here is a snippet of the jQuery code:

$(document).ready(function(){
    var current_id;
    $('div.video_image').hover(
        function(){
            current_id = $(this).attr('id').split('_')[1];
            $('div#text_' + current_id).stop().animate({'opacity': '1'}, 'slow');                
        }
    );
});

Thanks.

Something like might work. Here is an example of this script in action: http://jsbin.com/apiya3

$(document).ready(function(){
    var current_id, previous_id;
    $('div.video_image').hover(
        function(){
            previous_id = current_id;
            if (previous_id)
                $('div#text_' + previous_id).stop().animate({'opacity': '0'}, 'slow');

            current_id = $(this).attr('id').split('_')[1];
            $('div#text_' + current_id).stop().animate({'opacity': '1'}, 'slow');                
    });
 });

Have you tried the element.hide() and element.show() functions? They take speed as a parameter (e.g. 'slow', 'fast', etc).

A solution would be to clear the large div (.empty function) and put the new text inside (.append() function or .html() function)

You should use the mouseover and mouseout functions instead of hover because hover doesn't reset when you move the mouse off the element. Also, the show() and hide() functions are easier than animating the opacity.

$(document).ready(function(){
var current_id;
$('div.video_image').mouseover(
    function(){
        current_id = $(this).attr('id').split('_')[1];
        $('div#text_' + current_id).stop().show('slow');                
    });
$('div.video_image').mouseout(
    function(){
        $('div#textcontainer).children().hide('slow');

});

Or something like that at least...