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

发布于 2024-08-31 06:41:34 字数 481 浏览 6 评论 0原文

我需要使用 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。另外，老板希望过渡是渐进的——就像褪色一样……

有什么建议吗？

非常感谢！

希思

原文

I need to fade a div (and image) to reveal a div underneath (text with clickable links) using jQuery.

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

});
</script>

Used the above code and all worked well, until I went to click the links. Seems the top hidden div is preventing me from doing so.

Tried the replaceWith function and that allowed me to click the links too - but couldn't get it to go back to showing original div when I moused out. Also, bossman wants the transition to be gradual - like a fade...

Any suggestions?

Many thanks!

Heath

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

别想她 2024-09-07 06:41:34

好的 - 以下两个在大多数浏览器中都工作得很好，但是在 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 中，事情还是很奇怪。有没有人知道的解决办法？

非常感谢...

Okay - both of the following are working well enough in most browsers, but in IE, whenever I even move the mouse slightly, the div starts fading in and out - and also can build up a queue or a loop of the fadein/fadeout events:

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

I tried the suggested hoverIntent plugin, and the event.stopPropagation function. Still, in IE - things are just all screwy. Is there any way around this that anyone knows of?

Many thanks...

回复收藏 0 原文

~没有更多了~