CODEWITHSUNDEEP
javascriptjquerydelayslide
user244394
user244394

Reputation: 13468

How to make user hover for two sec before slideDown

I have a working code below that does slideDown functionality, but I want the user to hover for 2 sec at least before it should slide down. If the user doesn't hover for 2 sec it should not slide down.

I had tried the delay but it still fires even though I haven't hovered on the link for 10 sec.

Here is my code below and 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();
});

Upvotes: 2

Views: 86

Answers (2)

Vince
Vince

Reputation: 3288

I would use the setTimeout() and clearTimeout() functions. Something like this should work:

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); });

EDIT: Having looked at the jsFiddle you posted in a comment, it seems that you will also need event delegation in order to make this work. I have updated my answer accordingly. (edited fiddle link https://jsfiddle.net/zsdgjsz7/4/)

EDIT 2: I re-read your question and I believe I now understand what you're going for. Please see my updated fiddle https://jsfiddle.net/zsdgjsz7/9/

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206488

jsFiddle

You need (beside the comments in code) to use .on() method for dynamically generated elements

$(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();
    });

});

Upvotes: 1

Related Questions