Question

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.

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.

Answer 1

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