0

这似乎是一个非常常见的问题，尽管我尝试了使用 addClass / removeClass 而不是直接 CSS 操作的建议，并且我尝试了 mouseleave / mouseout 但两者都会导致问题。

我想要的只是一个改变班级的简单翻转！我尝试的所有东西要么不一致地闪烁，要么闪烁。我一直试图满足的唯一其他要求是让侦听器存在于函数中而不是内联。这就是让这不可能的原因吗？

function highlight(_event){
  $(this).addClass("Highlighted");
}
function unhighlight(_event){
  $(this).delay(2000,function(){
    $(this).removeClass("Highlighted");
  });
}

$(document).ready(function () { 
  $(".Content").live('mouseenter',highlight);
  $(".Content").live('mouseout',unhighlight);
});

以上的JSFiddle

编辑

添加.stop(true,true)似乎有很大帮助。

4

3 回答 3

1

如果您想使用 live，您可以使用.toggleClass(), .mouseover()&执行以下操作.mouseout()：

$(".content").live("mouseover mouseout", function() {
    $(this).toggleClass("highlight");
});

在此处查看演示

更新：我不能离开这个，所以继续弄乱你的例子 - 在评论之后你在其他地方使用这些功能。所以这是我发现的：

而不是调用.mouseout()use .mouseleave()- 由于某种原因.mouseout()，当鼠标移动时多次调用 get - 它甚至在鼠标第一次进入对象时被调用.....查看最后的演示以了解我的意思

其次，这里.delay()并没有真正正确使用 - 它实际上是为了排队效果- 但你真正想要的是添加一个延迟函数（尽管它是你所追求的效果）所以改为使用.setTimeout()来进行调用为你。

根据文档：

该.delay()方法最适合在排队的 jQuery 效果之间进行延迟。因为它是有限的——例如，它不提供取消延迟的方法——.delay()不能替代 JavaScript 的本机 .setTimeout()函数，这可能更适合某些用例。

所以完成的函数看起来像这样：

function highlight(_event) {
    $(this).addClass("Highlighted");
}

function unhighlight(_event) {
    var obj = $(this);
    setTimeout(function() {
        obj.removeClass("Highlighted");
    }, 2000);
}

$(document).ready(function() {
    $(".Content").live('mouseenter', highlight);
    $(".Content").live('mouseleave', unhighlight);  
});

请参阅此处的演示， 此演示将向您展示我对.mouseout()多次触发事件的含义，因为该.mouseleave()函数仅在鼠标实际离开时才调用一次。
注意：使用你的回车键按下警报ok，不要移动你的鼠标！！

请参阅此处的演示，以查看此处的最终版本尽可能接近您的原始版本。

于 2011-03-19T20:59:18.810 回答
0

如果您愿意，我认为您可以转储函数并改为执行此操作-当然，如果您没有将这些函数用于其他任何事情：

$(document).ready(function () {
$(".Content").live('mouseenter',function(){ $(this).addClass("Highlighted");
});
$(".Content" ).live('mouseout',function(){ $(this).delay(2000,function(){ $(this).removeClass("Highlighted"); });
}); });

于 2011-03-19T20:51:46.927 回答
0

尝试

//Might be better to use .toggleClass("Highlighted");

var timer;

$(".Content").hover(
    function(){
        clearTimeout(timer);
        $(this).addClass("Highlighted");
    },
    function(){
        timer = setTimeout(function(){
            $(this).removeClass("Highlighted");
        }, 2000);
    }
);
于 2011-03-19T20:51:49.930 回答