如何让用户在 slideDown 之前悬停两秒

Question

我在下面有一个可以执行 slideDown 功能的工作代码，但我希望用户至少悬停 2 秒，然后才能向下滑动。如果用户没有悬停 2 秒，则不应向下滑动。

我已经尝试过延迟，但即使我没有在 link 上悬停 10 秒，它仍然会触发。

下面是我的代码 fiddle ：

$(document).ready(function() {
    $(".item-content").hide();

    $(".item-show").on("mouseover", function() {
        $(this).delay(10020).hide().parent('p').next(".item-content").delay(1520).slideDown( "slow" );
    });

    $("span.close-icon").on("click", function() {
        $(this).parent('.item-content').slideUp('slow').parent().find('.item-show').show();
    });
});

$("div.previewCardPageClose").on("click", function() {
    $(this).parent('.previewCard-content').slideUp('slow').parent().find('.previewCard-showhide').show();
});

Answer 1

jsFiddle

您需要（除了代码中的注释）对动态生成的元素使用 .on() 方法

$(document).ready(function() {

   var timeo = null;

   $(".item-content").hide(); // Hide all!!!

    $("body").on("mouseenter", ".item-show", function() { // Use rather mouseenter!

        var $that = $(this);           // Store the `this` reference
        clearTimeout( timeo );         // Clear existent timeout on m.Enter 

        timeo = setTimeout(function(){  // Before setting a new one
            $that.hide().closest('p').next(".item-content").slideDown( "slow" );
        }, 2000);

    }).on("mouseleave", ".item-show", function(){   // mouse leaves? Clear the timeout again!
        clearTimeout( timeo );
    });  

    $(".close-icon").on("click", function() {
        var $itemB = $(this).closest(".item-b");
        $itemB.find(".item-content").slideUp();
        $itemB.find(".item-show").show();
    });

});

Answer 2

我会使用 setTimeout() 和 clearTimeout() 函数。这样的事情应该有效：

var timer;

$("#data")
    .on("mouseover", ".item-show", function() {
        var el = $(this);
        timer = setTimeout(function() {
                el.closest('.item-b').find(".item-content").show('slidedown');
        }, 10000); })
    .on('mouseout', ".item-show", function() {
        clearTimeout(timer); });

编辑：查看了您在评论中发布的 jsFiddle，看来您还需要事件委托才能完成这项工作。我已经相应地更新了我的答案。（已编辑 fiddle link https://jsfiddle.net/zsdgjsz7/4/）

编辑 2：我重新阅读了您的问题，我相信我现在明白您要做什么了。请看我更新的 fiddle https://jsfiddle.net/zsdgjsz7/9/

如何让用户在 slideDown 之前悬停两秒

How to make user hover for two sec before slideDown

javascript

jquery

delay

slide