[英]Show and Hide Div onMouseOver
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. 我希望将鼠标悬停在其上的文本链接为目标div中的隐藏文本设置动画。 So when I hover over link A, that text fades in; 因此,当我将鼠标悬停在链接A上时,该文本消失了; when I hover over link B, the previous text fades away and new text fades in. 当我将鼠标悬停在链接B上时,前一个文本消失,新文本消失。
Here is my javascript: 这是我的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,其中包含要淡入和淡出的文本片段:
<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 我假设我需要设置#MessageA / B / C显示:无
Here is a jsFiddle that does what I think you are trying to do. 这是一个jsFiddle,它可以执行我认为您要尝试的操作。
http://jsfiddle.net/rcravens/md3Xe/ http://jsfiddle.net/rcravens/md3Xe/
If that is not it, please provide additional information. 如果不是,请提供其他信息。
Bob 鲍勃
i've "improved" the answer by rcravens 我已经“改善”了rcravens的答案
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. 此外,由小变到你的链接(添加引用的类),并使它所以,只要你将鼠标悬停在股利,股利也将保持可见(通过采用易于修改“#textMessages,”出的.hover()
选择器。
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. 工作示例: http : //www.jsfiddle.net/bradchristie/zgbfa/1/另一个将“内容div”考虑在内的示例: http : //www.jsfiddle.net/bradchristie/zgbfa/3/ (可以玩如果需要,也可以使用defaultDiv
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.