delay hover method

Question

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 ??

What do you mean by delay? Not fire the hover unless the user stays over the element for a minimum amount of time or simply wait a little while before firing the callback, but still firing the callback if the user's mouse ever hovers even for an instant? — tvanfosson, Mar 19 '11 at 23:44

Scoobler · Accepted Answer · 2011-03-20T01:48:30.343

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

Jon Gauthier · Answer 2 · 2011-03-19T23:55:32.650

2

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

edited Mar 19 '11 at 23:55

answered Mar 19 '11 at 23:36

Jon Gauthier

25,202
6
63
69

I think you are miss-understanding what [`.delay()`](http://api.jquery.com/delay/) does. It does not delay chained methods, it adds a delay to [jQuery effects](http://api.jquery.com/category/effects/) which have been chained to an object. [Take a look here](http://jsfiddle.net/fsCus/1/) at a small demo for what delay does. Hope it helps. – Scoobler Mar 19 '11 at 23:51
Sorry about that. I posted a corrected version of the code that uses setTimeout() instead. – Jon Gauthier Mar 19 '11 at 23:56
i thought i want to do what you just write, but i dont, i would like to delay all function not just .hover part – gidzior Mar 20 '11 at 00:16
You would like to delay all of the function? Can you explain more, please? Do you mean that you don't want to set up the hover effect until a certain time after the page has loaded? – Jon Gauthier Mar 20 '11 at 00:19
i would like to triger this whole function after for example 5 sec after i mouseover a "li:even" element and triger it immediately when i mouseout "li:even" element, so that when i mouseover for 2 sec it wont triger at all – gidzior Mar 20 '11 at 00:31
now it alweys triger even when i just mouseover for a half sec – gidzior Mar 20 '11 at 00:33
but it waits whit that setTimeout time which is 1000 in yours example – gidzior Mar 20 '11 at 00:48
Hmm.. you could add two events, one for `mouseenter` and one for `mouseleave`. In the `mouseenter` event, set some attribute of the HTML element, ex. `waiting` = `true`. Then set up a timeout to run the animation if that attribute still exists after a certain period of time. Then, in your `mouseleave` event, remove the attribute. Does that make sense? I'll write some example code if needed. – Jon Gauthier Mar 20 '11 at 00:53
it make sense but i need help whit that – gidzior Mar 20 '11 at 01:00
i have this $(document).ready(function(){ $(".wypWedkarskie li").filter(":odd").hide().end().filter(":even").hover( function () { $(this).toggleClass("active") .next().stop(true, true).slideToggle(); }); }); which work perfect – gidzior Mar 20 '11 at 01:00
and i would like to add those events to code above – gidzior Mar 20 '11 at 01:01
where i have to add mouseenter and mouseleave events ?? – gidzior Mar 20 '11 at 01:02
gidzior see the update to my answer below for some help. – Scoobler Mar 20 '11 at 01:49

score 2 · Answer 3 · answered Mar 19 '11 at 23:37

2

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!

answered Mar 19 '11 at 23:37

Gonzalo Larralde

3,523
25
30

i know this but i dont know how to combine it and hoverIntent it self work difrent – gidzior Mar 19 '11 at 23:44
It doesn't work different. As you can see in plugin's demos, it replaces hover. You can use it in the same way you use hover. But it seems that you need something different. Why don't you explain what you want to do with more details? – Gonzalo Larralde Mar 19 '11 at 23:46
i have a list
SZWECJA
NORWEGIA

gidzior

Mar 19 '11 at 23:59

sory for formating i dont know how to break the lines LOL – gidzior Mar 20 '11 at 00:06

delay hover method

3 Answers3