jquery - 延迟悬停法

Question

这个问题已经有答案了:

Delay jquery hover event? (6 个回答)

已关闭 10 年前。

大家好，我想在此函数中延迟悬停方法

$(document).ready(function(){
$(".wypWedkarskie li").filter(":odd").hide().end().filter(":even").hover(
  function () {
    $(this).toggleClass("active")
      .next().stop(true, true).slideToggle();
  });
});

我需要做什么？

Answer 1

如果您想延迟悬停内的操作，可以使用 javascript .setTimeout()添加 x 秒的延迟。

试试这个，它将隐藏列表中的所有奇数项，然后为所有偶数项添加悬停效果，悬停时它将立即切换事件类，两秒后它将切换下一个对象:

$(".wypWedkarskie li").filter(":odd").hide().end().filter(":even").hover(
    function() {
        var obj = $(this);
        var nextObj = obj.next();

        obj.toggleClass("active");
        setTimeout(function() {
            nextObj.slideToggle();
        }, 2000);
    }
);

您可以看到正在运行的 demo here

<小时/>

更新:

这应该会给你我相信你想要的东西。
它将立即突出显示您悬停在其上的项目。 2 秒后，如果您仍然悬停，它将显示第二项。一旦您停止悬停，它将隐藏第二个项目。如果您在 2 秒之前停止悬停，则不会显示第二项:

$(".wypWedkarskie li").filter(":odd").hide().end().filter(":even").hover(
    function() {
        var obj = $(this);
        var nextObj = obj.next();
        obj.addClass("active");
        setTimeout(function() {
            if (obj.hasClass('active')) {
                nextObj.slideDown();
            }
        }, 2000);
    },
    function() {
        var obj = $(this);
        var nextObj = obj.next();
        obj.removeClass('active');
        nextObj.slideUp();
    }
);

查看工作 demo here