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

这样做有利于计时器。此外，对您的链接进行了少量更改（添加了一个类以供参考）并将其设置为只要您将鼠标悬停在div上，div也将保持可见（通过从{{{{{{{{{{{{ 1}}选择器。

工作示例：http://www.jsfiddle.net/bradchristie/zgbfa/1/ 考虑“内容div”的另一个例子：http://www.jsfiddle.net/bradchristie/zgbfa/3/（如果你愿意，也可以使用.hover()。

显示和隐藏Div onMouseOver

3 个答案: