悬停时fadeTo的Jquery问题答案

【问题标题】：Jquery Issue with fadeTo on hover悬停时fadeTo的Jquery问题
【发布时间】：2011-12-16 05:14:48
【问题描述】：

所以基本上我试图让div.show 在悬停时淡入，然后当您停止悬停时，让它淡入不透明度为 0。

但是，当您停止悬停时，我无法让 div 淡化回 0。

这是我的代码：

$(document).ready(function(){
    $("div.post.photo").live('hover', function() {
        $(this).children("div.show").fadeTo("slow", .7);
    }, function(){
        $(this).children("div.show").fadeTo("slow", 0);
    });
});

谢谢

【问题讨论】：

标签： jquery html fadeto

【解决方案1】：

您需要使用event.type 明确检查mouseenter 和mouseleave 事件。您不需要将它们绑定两次。

$(document).ready(function(){
    $("div.post.photo").live('hover', function(event) {

        if( event.type === 'mouseenter') 
            $(this).children("div.show").fadeTo("slow", .7);
        else if( event.type === 'mouseleave' )
            $(this).children("div.show").fadeTo("slow", 0);
    });
});

这是fiddle。我个人会使用.on，但我不确定你使用的是什么版本的jQuery。

【讨论】：

【解决方案2】：

我很确定您应该将其淡化回 1，而不是 0。 live() 也只需要一个处理程序。您需要单独附加鼠标移出事件。

fiddle

【讨论】：

这也不值得：/
这与他试图做的相反。它应该淡出，而不是恢复到 100% 的不透明度
@NateB 正如我在回答中指出的那样，我认为这与他实际需要的相反。除非前提条件是 .show 以 0 不透明度开始，但在 OP 中没有任何相关内容。无论如何，只需将 1 更改为 0 并将 opacity:0 添加到 .show 即可。
抱歉，css中设置为不显示。
好吧，这行得通。非常感谢，我不得不更改数字，这很好。有趣的是，委托在新元素上不使用 live 的情况下工作，而 on 不使用？

【解决方案3】：

我发现如果你使用.hover()而不是.live()，这会起作用，所以我认为问题是.live()不支持悬停事件，可能是因为.live()只有一个处理函数，而不是两个。

在 jQuery 1.7+ 中，这似乎可行（将其分解为两个事件处理程序并现代化为 .on()）：

$(document).ready(function(){
    $(document.body).on("mouseenter", "div.post.photo",
        function() {
            $(this).children("div.show").fadeTo("slow", .7);
        }
    );

    $(document.body).on("mouseleave", "div.post.photo",
        function() {
            $(this).children("div.show").fadeTo("slow", .0);
        }
    );
});

您可以在这里看到它的工作原理：http://jsfiddle.net/jfriend00/YV2nU/。

仅供参考，我切换到 .on()，因为 .live() 在 jQuery 1.7+ 中已被弃用。

【讨论】：

嗯，我的问题是当你滚动到页面底部时，我使用了一个无限滚动脚本来获取新帖子。因此，现场允许脚本继续处理新元素。当我使用您的建议时，该脚本不适用于提取的任何新的div.post.photo。
如果我能看到您的实际页面，我可以提供帮助。除此之外，.on() 是.live() 的直接替代品，因此它应该提供相同的动态行为。您可以在我的代码示例中改进的一件事是将 document.body 更改为始终存在的父 div，但更接近动态添加的项目。
但是，我使用了上面使用delegate 而不是on 的答案，它就像一个冠军。不过感谢您的帮助。

【解决方案4】：

您的问题是 hover 不是 Javascript 事件，它是 mouseenter 和 mouseleave 事件的 JQuery 简写，因此不能在 live 这样的方法中使用。您需要分别绑定它们。此外，您应该注意 .live() 方法已被弃用。 JQuery documentation 给出了更好使用方法的说明。

【讨论】：