顯示和隱藏Div onMouseOver

Question

大家好，這里只需要一點幫助，非常接近我所追求的，但還不完全是。

我希望將鼠標懸停在其上的文本鏈接為目標div中的隱藏文本設置動畫。 因此，當我將鼠標懸停在鏈接A上時，該文本消失了； 當我將鼠標懸停在鏈接B上時，前一個文本消失，新文本消失。

這是我的JavaScript：

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

這是我的鏈接：

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

這是我的目標div，其中包含要淡入和淡出的文本片段：

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

我假設我需要設置＃MessageA / B / C顯示：無

Answer 1

這是一個jsFiddle，它可以執行我認為您要嘗試的操作。

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

如果不是，請提供其他信息。

鮑勃

Answer 2

我已經“改善”了rcravens的答案

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

Answer 3

這是我的出價：

$(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);
    }
});

這樣做可以利用計時器的優勢。 此外，由小變到你的鏈接（添加引用的類），並使它所以，只要你將鼠標懸停在股利，股利也將保持可見（通過采用易於修改“#textMessages，”出的.hover()選擇器。

工作示例： http : //www.jsfiddle.net/bradchristie/zgbfa/1/另一個將“內容div”考慮在內的示例： http : //www.jsfiddle.net/bradchristie/zgbfa/3/ （可以玩如果需要，也可以使用defaultDiv 。