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

來源

2011-01-18 brianrhea

這是一個jsFiddle，它可以完成我認爲你正在嘗試的任務。

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

如果不是的話，請提供更多信息。

鮑勃

來源

2011-01-18 21:13:01 rcravens

賓果有沒有辦法動畫文本。！？ 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/

來源

2011-01-18 21:18:36 alfred

這裏是我的出價「改良」的答案：

$(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，如果你想和

來源

2011-01-18 21:24:03

Show and Hide Div onMouseOver

回答

相關問題