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> 

私は＃1 MessageA/B/C displaを設定する必要がありますと仮定y：なし

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

はそうすることで、タイマーを利用しました。また、あなたのリンクを少し変更して（参照用のクラスを追加しました）、div上にマウスを置くとdivも表示されます（.hover()セレクタの '#textMessages' 。

の作業例：http://www.jsfiddle.net/bradchristie/zgbfa/1/ 考慮し、「コンテンツのdivを」取ってのもう一つの例：（あなたにもたい場合defaultDivで遊ぶことができます