delay hover method [duplicate]

This question already has answers here: Delay jquery hover event? 开发者_JS百科 (6 answers) Closed 9 years ago.

hi guys i would like to delay hover method in this function

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

what i need to do ??

---

If you want to delay an action within a hover, you can use javascripts .setTimeout() to add a delay of x seconds.

Try this, it will hide all odd items in a list, then add a hover effect to all the even ones, upon hovering it will instantly toggle the active class, and after two seconds it will toggle the next object:

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

You can see a working demo here

---

Update :

This should give you what I believe you are after.
It will highlight the item you are hovering over instantly. After 2 seconds, if you are still hovering it will show the 2nd item. As soon as you stop hovering it will hide the 2nd item. If you stop hovering before 2 seconds, the 2nd item won't be shown:

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

See a working demo here

---

Check out hoverIntent. Is a plugin that tries to figure out if the user wants to put the mouse over an element, or if just passes the mouse over it.

Good luck!

---

Corrected code is below the horizontal rule

Use jQuery's delay function. This will wait a certain period of time before performing any methods called after it. For example:

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

will wait for a delay of 1 second before toggling the active class, stopping the next sibling's animation, and so on.

---

Edit: Doh! I misunderstood jQuery's delay. You can use setTimeout(), then.

$(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