Show and Hide Div onMouseOver

问题描述：

嘿，大家，在这里只需要一点点帮助，这跟我之后的事情非常接近，但并不完全。Show and Hide Div onMouseOver

我想要将鼠标悬停在文字链接上以在目标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 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>

我假设我需要设置＃消息A/B/C显示y：none

答

这是一个jsFiddle，它可以完成我认为你正在尝试的任务。

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

如果不是的话，请提供更多信息。

鲍勃

宾果有没有办法动画文本。！？ FadeIn/Out SlideUp/Down？ – brianrhea 2011-01-18 21:17:51

当然，你可以使用'fadeIn'和'fadeOut'来代替'show'/'hide'。 net/rcravens/md3Xe/6/ – rcravens 2011-01-18 21:22:08

答

我已经rcravens

http://jsfiddle.net/md3Xe/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”考虑又如：http://www.jsfiddle.net/bradchristie/zgbfa/3/（可以玩弄defaultDiv，如果你想和

Show and Hide Div onMouseOver

相关推荐