javascript - 如何让用户在滑动之前悬停两秒

Question

我下面有一个工作代码，它具有 slideDown 功能，但我希望用户在下滑之前至少悬停 2 秒。如果用户没有将鼠标悬停 2 秒，则不应向下滑动。

我尝试过延迟，但即使我没有在链接上悬停 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();
    });

});