Question

大家好我想在这个函数中延迟悬停方法

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

我需要做什么？

Answer 1

如果您想在悬停中延迟操作，可以使用javascripts .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

Answer 2

更正后的代码低于横向规则

使用jQuery的delay函数。这将在执行之后调用的任何方法之前等待一段时间。例如：

$(this).delay(1000).toggleClass("active")
      .next().stop(true, true).slideToggle();

将等待延迟1秒，然后切换active类，停止下一个兄弟的动画，依此类推。

编辑：Doh！我误解了jQuery的delay。您可以使用setTimeout()，然后使用。

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

JSFiddle here

Answer 3

结帐hoverIntent。是一个插件，试图弄清楚用户是否想将鼠标放在元素上，或者只是将鼠标移到它上面。

祝你好运！

延迟悬停方法

3 个答案: