Show and Hide Div onMouseOver

Question

Hey guys, need just a little bit of help here, it's very close to what I'm after but not quite.

I want the text links I hover over to animate hidden text in a target div. So when I hover over link A, that text fades in; when I hover over link B, the previous text fades away and new text fades in.

Here is my javascript:

<script type="text/javascript">
function ShowHide(){
    $("#textMessages").animate({"height": "toggle"}, { duration: 1000 });
    }
</script>

Here are my links:

<a onMouseOver="ShowHide(); return false;" href="#">Message A</a>

<a onMouseOver="ShowHide(); return false;" href="#">Message B</a>

<a onMouseOver="ShowHide(); return false;" href="#">Message C</a>

And here is my target div with text snippets to fade in and fade out:

<div id="textMessages">

<div id="defaultMessage">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>

<div id="MessageA">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>

<div id="MessageB">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>

<div id="MessageC">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>

</div>

I assume I will need to set the #MessageA/B/C display:none

Answer 1

Here is a jsFiddle that does what I think you are trying to do.

http://jsfiddle.net/rcravens/md3Xe/

If that is not it, please provide additional information.

Bob

Answer 2

i've "improved" the answer by rcravens

http://jsfiddle.net/md3Xe/3/

Answer 3

Here's my bid:

$(function(){
    var slideOut = null;
    $('#textMessages').slideUp(1000);
    $('#textMessages,.textMessagesLink').hover(function(){
        $("#textMessages").slideDown(1000);
        if (slideOut != null) {
            clearTimeout(slideOut);
            slideOut = null
        }
    },function(){
        slideOut = setTimeout(HideHide,1000);
    });
    function HideHide(){
        $('#textMessages').slideUp(1000);
    }
});

Took advantage of a timer in doing so. Also, made small change to your links (added a class for reference) and made it so as long as you hover over the div, the div will also stay visible (easily modified by taking the '#textMessages,' out of the .hover() selector.

Working example: http://www.jsfiddle.net/bradchristie/zgbfa/1/ Another example of taking "content divs" into consideration: http://www.jsfiddle.net/bradchristie/zgbfa/3/ (Can play around with defaultDiv if you'd like as well.