Jquery chaining syntax

Question

What is the correct way to invoke a mouseenter() event... pause... mouseleave() event?

Something like...

$('.some_item').each(function(index) {
    $(this).mouseenter().delay(2000*index).mouseleave();
});

...but that doesn't work

Here's a fiddle to play with

P.s. I don't actually want to change the colour of anything, the fiddle is just an example. It must be mouseenter() and mouseleave()

score 2 · Accepted Answer · answered Sep 07 '12 at 15:08

$(document).ready(function() {
    $('.some_item').mouseenter(function() {
        $(this).css('color', 'red');
    });

    $('.some_item').mouseleave(function() {
        $(this).css('color', 'green');
    });

    $('.some_item').each(function(index) {
        var $this = $(this);
        $this.mouseenter();
        setTimeout(function() { $this.mouseleave(); }, 2000*index);
    });
});

http://jsfiddle.net/8enTg/3/

score 1 · Answer 2 · answered Sep 07 '12 at 15:08

1

.mouseenter can't be delayed. You can use .queue to do that

$('.some_item').each(function(index) {
    var elem = $(this);
    elem.mouseenter().delay(2000*index).queue(function(next){
       elem.mouseleave();
       if (next) next();
    });
});

See fiddle

answered Sep 07 '12 at 15:08

ori

7,817
1
27
31

I've marked nbrooks answer as correct because using setTimeout was more suited to my actual code. Your answer was technically still correct for the question asked. +1. Thanks for your help – Turnip Sep 08 '12 at 00:17

Jquery chaining syntax

2 Answers2