Jquery delay on function

Question

Hi I written a two jquery functions for a simple fading menu, it basically splits the screen in half and allows you go to one of two sites. How can I set a delay of say 2 seconds before these function work? Here's my code:

$('#retailNav').bind({
    mouseenter: function() {
        $('#retailFull:not(:animated)').fadeIn('slow');
        $('#residentialNav:not(:animated)').fadeOut('slow');
    },
    mouseleave: function() {
        $('#retailFull').fadeOut('slow');
        $('#residentialNav').fadeIn('slow');
    }
});
$('#residentialNav').bind({
    mouseenter: function() {
        $('#retailHalf:not(:animated)').fadeOut('slow');
        $('#retailNav:not(:animated)').fadeOut('slow');
        $('#residentialFull p').html('Click to enter residential');
    },
    mouseleave: function() {
        $('#retailHalf').fadeIn('slow');
        $('#retailNav').fadeIn('slow');
        $('#residentialFull p').html('Residential');
    }
});

Do I have somehow wrap these in another function?

Xion · Accepted Answer · 2010-10-29 13:49:28Z

2

You can use delay() function before your fade* calls or just wraps everything into setTimeout JS timer.

answered Oct 29, 2010 at 13:49

Xion

22.9k10 gold badges57 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Barrie Reader · Accepted Answer · 2010-10-29 14:54:03Z

You could get away with:

function thisFunction() {
    $('#retailNav').bind({
        mouseenter: function() {
            $('#retailFull:not(:animated)').fadeIn('slow');
            $('#residentialNav:not(:animated)').fadeOut('slow');
        },
        mouseleave: function() {
            $('#retailFull').fadeOut('slow');
            $('#residentialNav').fadeIn('slow');
        }
    });
    $('#residentialNav').bind({
        mouseenter: function() {
            $('#retailHalf:not(:animated)').fadeOut('slow');
            $('#retailNav:not(:animated)').fadeOut('slow');
            $('#residentialFull p').html('Click to enter residential');
        },
        mouseleave: function() {
            $('#retailHalf').fadeIn('slow');
            $('#retailNav').fadeIn('slow');
            $('#residentialFull p').html('Residential');
        }
    });
}

setTimeout(thisFunction(), 2000);

Collectives™ on Stack Overflow

Jquery delay on function

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related