Search code examples
jquerydelaymouseentermouseleave

Jquery chaining syntax


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


Solution

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