CODEWITHSUNDEEP
jquery
StuBlackett
StuBlackett

Reputation: 3857

Trigger on a timer using jQuery

I have a list of tabs.

You hover over the tab and it loads in the tab content.

What my client would like to do is when you hover out load back in the home tab. Now this is causing some problems with my hover, In that you hover down the list and it always flicks back to the home tab. Which is correct, But what I'd like to do is wait for 3 or 4 seconds to load the home tab back in. Or otherwise load the next hovered tab in the sequence.

Hope this makes sense,

My current code is...

$('div.vertical_tabs ul.st_tabs li a').hover(
        function() {
            $(this).trigger('click');
} , function() {
            $('.home').trigger('click');
}           
});

Any help appreciated on this one.

Upvotes: 1

Views: 2131

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206058

Basically it should look like this:

$('div.vertical_tabs ul.st_tabs li a').hover(function() {
    clearTimeout($('.home').data('timeout'));
    $(this).trigger('click');   
}, function() {
    var t = setTimeout(function() {
        $('.home').trigger('click');
    }, 2000);
    $('.home').data('timeout', t);
});

Here is a demo:

http://jsbin.com/uyizud/edit#javascript,html,live

Upvotes: 1

Related Questions