尝试在悬停时淡出顶部 div 以使用 JQuery 在下面的文本中显示工作链接答案

【问题标题】：trying to fade out a top div on hover to reveal working links in text below using JQuery尝试在悬停时淡出顶部 div 以使用 JQuery 在下面的文本中显示工作链接
【发布时间】：2011-02-15 14:38:03
【问题描述】：

我需要使用 jQuery 淡化 div（和图像）以显示下面的 div（带有可点击链接的文本）。

<script>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});

});
</script>

使用上面的代码并且一切正常，直到我去点击链接。似乎顶部隐藏的 div 阻止我这样做。

尝试了 replaceWith 功能，它也允许我单击链接 - 但当我鼠标移出时无法让它返回显示原始 div。此外，老板希望过渡是渐进的 - 就像淡出...

有什么建议吗？

非常感谢！

希思

【问题讨论】：

标签： jquery replace hover fadein fadeout

【解决方案1】：

好的 - 以下两种方法在大多数浏览器中都运行良好，但在 IE 中，只要我稍微移动鼠标，div 就会开始淡入和淡出 - 并且还可以建立一个队列或淡入循环/淡出事件：

$(document).ready(function () {
    $("#goingimg").hover(
        function () { $(".going").fadeOut("normal",0); }, 
        function () { $(".going").fadeTo("normal",1); }
    );       
});

$(document).ready(function () {
    $("#goingimg").hoverIntent(function() {
        $(".gone").fadeOut("normal",0);
        $('#goingimg').hoverIntent(function(event) { event.stopPropagation(); });
    }, function() {
        $(".gone").fadeTo("normal",1);
        $('#goingimg').hoverIntent(function(event) { event.stopPropagation(); });
    });
});

我尝试了建议的 hoverIntent 插件和 event.stopPropagation 函数。尽管如此，在 IE 中 - 事情都非常糟糕。有没有人知道的解决方法？

非常感谢...

【讨论】：